<template>
  <div class="block-pp-header">
    <span class="background" :style="{ backgroundColor: '#E46C0A' }" />>

    <div class="left">
      <span class="left-bg" :style="{ background: '#E46C0A' }" />

      <div class="category">
        <span :style="{ background: '#E46C0A' }">{{ category }}</span>

        <span :style="{ backgroundColor: '#E46C0A' }" />
      </div>
    </div>

    <div class="right">
      <div class="brands">
        <BaseText>{{ $_tr('brands') }}</BaseText>

        <BrandsList :list="brands" />
      </div>

      <div class="management-mode">
        <BaseText>{{ $_tr('managementModes') }}</BaseText>

        <BaseText>{{ formattedManagementModes }}</BaseText>
      </div>
    </div>
  </div>
</template>

<script>
import { BaseText } from 'inside-collection/atoms'

import BrandsList from './sub-components/BrandsList'

export default {
  name: 'BlockPPHeader',
  $_i18nRootPath: 'customs.pp.HEADER',
  components: {
    BaseText,
    BrandsList
  },
  props: {
    category: {
      type: String
    },
    brands: {
      type: Array
    },
    managementModes: {
      type: Array
    }
  },
  computed: {
    formattedManagementModes() {
      return this.managementModes.map(item => item.title).join(', ')
    }
  }
}
</script>

<style lang="scss" scoped>
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.block-pp-header {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;

  @include mobile {
    flex-direction: column;
  }

  .left,
  .right {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
  }

  .left {
    position: relative;
    padding: 0 var(--spacing-l);

    @include mobile {
      padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xxl)
        var(--spacing-m);
    }

    .left-bg {
      position: absolute;
      z-index: 1;
      inset: 0;
      opacity: 0.2;
    }
  }

  .right {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--spacing-l) 0;

    @include mobile {
      grid-template-columns: 1fr;
    }
  }

  .background {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0.1;
  }

  .category {
    position: relative;
    z-index: 2;
    color: var(--color-light);

    @include mobile {
      width: 100%;
    }

    span:first-child {
      position: relative;
      display: block;
      padding: var(--spacing-s) var(--spacing-m);
      font-size: var(--font-size-labor);
      font-weight: 600;
      z-index: 2;
      min-width: 212px;
      text-align: center;
    }

    span:last-child {
      position: absolute;
      z-index: 1;
      top: 5px;
      left: 7px;
      width: 100%;
      height: 35px;
      opacity: 0.4;
      content: '';
      transform: rotate(2deg);
      transform-origin: bottom left;
    }
  }

  .brands,
  .management-mode {
    padding: 0 var(--spacing-l);
  }

  .management-mode {
    @include desktop-only {
      min-width: 200px;
    }
  }

  .management-mode {
    position: relative;

    @include desktop-only {
      &::after {
        position: absolute;
        top: 50%;
        left: 0;
        width: 1px;
        height: 40px;
        background: var(--color-primary);
        transform: translateY(-50%);
        content: '';
      }
    }

    @include mobile {
      margin-top: var(--spacing-m);
    }
  }

  .brands,
  .management-mode {
    font-size: var(--font-size-labor);

    > p:first-child {
      font-weight: 600;
    }
  }
}

.inside-radius {
  .block-pp-header {
    border-radius: var(--radius-m);
    overflow: hidden;
  }
}
</style>
