<script lang="tsx">
import { defineComponent, type PropType } from 'vue'
import DefaultInput from '../../../ui/inputs/default-input'
import { TextSearchFilter } from '../Filters'

export default defineComponent({
  props: {
    filter: {
      type: Object as PropType<TextSearchFilter>,
      required: true,
    },
  },
  setup(props) {
    const filter: TextSearchFilter = props.filter as TextSearchFilter

    const setSearch = (val: string) => {
      if (!val) {
        filter.removeValue()
      } else {
        filter.addValue(val)
      }
    }

    return () => (
      <div class="ark-ui-filterbar-text-filter">
        <DefaultInput
          placeholder={filter.label}
          modelValue={filter.draftValue}
          onValueChange={setSearch}
        />

        <div class="ark-ui-filterbar-text-filter-icon">
          {
            !filter.hasValues()
              ? (
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  {/* eslint-disable-next-line max-len */}
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8744 11.5815C9.82908 12.4664 8.47685 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.47685 12.4664 9.82908 11.5815 10.8744L13.8536 13.1464C14.0488 13.3417 14.0488 13.6583 13.8536 13.8536C13.6583 14.0488 13.3417 14.0488 13.1464 13.8536L10.8744 11.5815ZM12 7C12 9.76142 9.76142 12 7 12C4.23858 12 2 9.76142 2 7C2 4.23858 4.23858 2 7 2C9.76142 2 12 4.23858 12 7Z" fill="#A3A7B9" />
                </svg>
              )
              : (
                <svg onClick={() => setSearch('')} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  {/* eslint-disable-next-line max-len */}
                  <path d="M4.14693 4.14645C4.3422 3.95118 4.65878 3.95118 4.85404 4.14645L8.00049 7.29289L11.1469 4.14645C11.3422 3.95118 11.6588 3.95118 11.854 4.14645C12.0493 4.34171 12.0493 4.65829 11.854 4.85355L8.70759 8L11.854 11.1464C12.0493 11.3417 12.0493 11.6583 11.854 11.8536C11.6588 12.0488 11.3422 12.0488 11.1469 11.8536L8.00049 8.70711L4.85404 11.8536C4.65878 12.0488 4.3422 12.0488 4.14693 11.8536C3.95167 11.6583 3.95167 11.3417 4.14693 11.1464L7.29338 8L4.14693 4.85355C3.95167 4.65829 3.95167 4.34171 4.14693 4.14645Z" fill="#A3A7B9" />
                </svg>
              )
          }
        </div>
      </div>
    )
  },
})
</script>

<style lang="scss" scoped>
.ark-ui-filterbar-text-filter {
  position: relative;

  width: 100%;
  display: flex;
  align-items: center;

  &:deep {
    .ark-ui-input, .ark-ui-input-box {
      width: 100%;
    }
  }

  &-icon {
    margin-top: 4px;
    right: 12px;
    position: absolute;
  }
}
</style>
