<script lang="tsx">
import {
  type PropType, defineComponent, type Ref, ref,
} from 'vue'
import useClickOutside from '../../composables/use-click-outside'
import { type ComputedColumnInterface } from './DefaultTableInterfaces'

export default defineComponent({
  props: {
    item: {
      type: Object as PropType<ComputedColumnInterface>,
      required: true,
    },
  },
  setup(props) {
    const filter: ComputedColumnInterface['filter'] = props.item.filter as unknown as ComputedColumnInterface['filter']
    const isBodyActive: Ref<boolean> = ref(false)
    const itemEl: Ref<HTMLDivElement | null> = ref(null)

    const setIsBodyActive = (val: boolean) => {
      isBodyActive.value = val
    }

    useClickOutside(itemEl, () => setIsBodyActive(false))

    // временное решение для кнопки "Перейти к фильтру"
    // const scrollToColumn = (filter: string) => {
    //   const tableHeader = document.querySelector('.ark-ui-table-header-row')
    //   if (tableHeader) {
    //     const headers = tableHeader.querySelectorAll('.ark-ui-table-header-cell, .ark-ui-table-header-cell *')
    //     headers.forEach((header) => {
    //       if (header.textContent === filter) {
    //         const closestHeader = header.closest('.ark-ui-table-header-cell')
    //         if (closestHeader) {
    //           closestHeader.scrollIntoView({ behavior: 'smooth', block: 'center' })
    //         }
    //       }
    //     })
    //   }
    // }

    return () => (
      <div ref={itemEl} class="ark-ui-default-table-chips">
        <div onClick={() => setIsBodyActive(!isBodyActive.value)} class={`ark-ui-default-table-chips-header ${isBodyActive.value ? 'active' : ''}`}>
          <svg class="ark-ui-default-table-chips-header-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 6.5L8 10.5L4 6.5" stroke="#585B69" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>

          <div>{ props.item.name }: { filter.showValues() }</div>

          <button onClick={() => filter.removeValues()} class="ark-ui-default-table-chips-clear">
            <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              {/* eslint-disable-next-line max-len */}
              <path d="M0.146721 0.146447C0.341983 -0.0488155 0.658566 -0.0488155 0.853828 0.146447L4.00027 3.29289L7.14672 0.146447C7.34198 -0.0488155 7.65857 -0.0488155 7.85383 0.146447C8.04909 0.341709 8.04909 0.658291 7.85383 0.853553L4.70738 4L7.85383 7.14645C8.04909 7.34171 8.04909 7.65829 7.85383 7.85355C7.65857 8.04882 7.34198 8.04882 7.14672 7.85355L4.00027 4.70711L0.853828 7.85355C0.658566 8.04882 0.341983 8.04882 0.146721 7.85355C-0.0485409 7.65829 -0.0485409 7.34171 0.146721 7.14645L3.29317 4L0.146721 0.853553C-0.0485409 0.658291 -0.0485409 0.341709 0.146721 0.146447Z" fill="#A3A7B9" />
            </svg>
          </button>
        </div>

        { isBodyActive.value && (
          <div class="ark-ui-default-table-chips-body">
            <div class="ark-ui-default-table-chips-body-items">
              { filter.getValues().map((item) => (
                <div class="ark-ui-default-table-chips-body-item">

                  { item }

                  <button onClick={() => filter.removeValue(item as never)} class="ark-ui-default-table-chips-body-item-clear">
                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                      {/* eslint-disable-next-line max-len */}
                      <path d="M0.146721 0.146447C0.341983 -0.0488155 0.658566 -0.0488155 0.853828 0.146447L4.00027 3.29289L7.14672 0.146447C7.34198 -0.0488155 7.65857 -0.0488155 7.85383 0.146447C8.04909 0.341709 8.04909 0.658291 7.85383 0.853553L4.70738 4L7.85383 7.14645C8.04909 7.34171 8.04909 7.65829 7.85383 7.85355C7.65857 8.04882 7.34198 8.04882 7.14672 7.85355L4.00027 4.70711L0.853828 7.85355C0.658566 8.04882 0.341983 8.04882 0.146721 7.85355C-0.0485409 7.65829 -0.0485409 7.34171 0.146721 7.14645L3.29317 4L0.146721 0.853553C-0.0485409 0.658291 -0.0485409 0.341709 0.146721 0.146447Z" fill="#A3A7B9" />
                    </svg>
                  </button>
                </div>
              )) }
            </div>

            {/* <div class="ark-ui-default-table-chips-body-filter">
                <button class="ark-ui-default-table-chips-body-filter-button"
                        onClick={() => scrollToColumn(props.item.name)}>
                  Перейти к фильтру
                </button>
              </div> */}
          </div>
        ) }
      </div>
    )
  },
})
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';

.ark-ui-default-table-chips {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;

  &-header {
    display: flex;
    align-items: center;
    height: 24px;
    box-sizing: border-box;
    padding: 4px;

    cursor: pointer;
    border-radius: 4px;
    background-color: #F0F1F7;

    color: #585B69;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;

    &-arrow {
      margin-right: 2px;
    }

    &.active .ark-ui-default-table-chips-header-arrow {
      transform: rotate(180deg);
    }

    &.active,
    &:hover {
      background-color: #D3D5E5;
    }
  }

  &-body {
    position: absolute;
    min-width: 100%;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(75, 77, 89, 0.08);
    z-index: $menu;

    &-items {
      max-height: 200px;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 4px;
        background: #F6F6FA;
      }

      &::-webkit-scrollbar-thumb {
        background: #A3A7B9;
        border-radius: 50px;
      }
    }

    &-filter,
    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 16px;
      white-space: nowrap;
      line-height: 16px;
      font-size: 14px;
      font-weight: 400;
      padding: 12px 16px;
    }

    &-filter {
      justify-content: center;
    }

    &-filter-button {
      margin: 0;
      padding: 0;
      border: none;
      background: none;

      color: #3A84FF;
      cursor: pointer;
      font-size: 14px;
      line-height: 16px;
      font-weight: 400;
    }

    &-item-clear {
      margin-left: 8px;
    }
  }

  &-body-item-clear,
  &-clear {
    border: none;
    cursor: pointer;
    background-color: transparent;
    min-width: 16px;
    padding: 0 4px;
    margin: 0 0 0 8px;
  }
}
</style>
