<template>
  <div class="vc-color-picker">
    <div
      class="vc-color-picker--list"
      :class="`vc-color-picker--list--${mode}`"
    >
      <div
        v-for="(color, index) in colors"
        :key="index"
        class="vc-color-picker--list-item"
        :class="{
          'vc-color-picker--list-item-active': color === selectedColor
        }"
        @click="clickInColorCard(color)"
      >
        <div
          class="vc-color-picker--list-item--color-bg"
          :style="setBgColor(color)"
        />
      </div>
      <div
        v-if="customColor"
        class="vc-color-picker--list-item"
        :class="{
          'vc-color-picker--list-item-active': customColor === selectedColor
        }"
        @click="clickInColorCard(customColor)"
      >
        <div
          class="vc-color-picker--list-item--color-bg"
          :style="setBgColor(customColor)"
        />
      </div>
    </div>
    <ColorPicker
      class="vc-color-picker"
      :saturation-width="colorPickerAreaWidth"
      :saturation-height="colorPickerAreaHeight"
      @changeColor="changeColor"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import ColorPicker from './ColorPicker/ColorPicker.vue'
import { VcColorPickerMode, VcColorPickerColorValue } from './VcColorPicker.types'

export default defineComponent({
  name: 'VcColorPicker',
  components: {
    ColorPicker
  },
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    colorList: {
      type: Array,
      default: () => []
    },
    mode: {
      type: String as PropType<VcColorPickerMode>,
      default: 'wide'
    },
    colorPickerAreaWidth: {
      type: Number,
      default: 280
    },
    colorPickerAreaHeight: {
      type: Number,
      default: 180
    }
  },
  emits: ['update:modelValue', 'input'],
  data () {
    return {
      defaultColors: ['#A8A8A8', '#F33232', '#FF871C', '#FAB11E', '#CF47FF', '#7ED321', '#43B20D', '#58C3FF', '#00CEC2', '#325FFF', '#183394', '#7C33F3', '#E7409A'],
      selectedColor: '' as string | unknown,
      customColor: '' as string | unknown
    }
  },
  computed: {
    colors () {
      return this.colorList.length ? this.colorList : this.defaultColors
    }
  },
  mounted () {
    this.selectedColor = this.modelValue
  },
  methods: {
    setBgColor (color: string | unknown): string {
      return `background-color: ${color}`
    },
    clickInColorCard (color: string | unknown): void {
      this.selectedColor = color
      this.$emit('input', color)
      this.$emit('update:modelValue', color)
    },
    changeColor (color: VcColorPickerColorValue) {
      this.customColor = color.hex
      this.clickInColorCard(color.hex)
    }
  }
})
</script>
<style lang="scss" scoped>
$max-width-list-wide: 130px;
$max-width-list-tall: 320px;
.vc-color-picker {
  @apply flex flex-col sm:flex-row;
  &--list {
    @apply flex flex-wrap;
    &--wide {
      max-width: $max-width-list-wide;
    }
    &--tall {
      max-width: $max-width-list-tall;
    }
    &-item {
      @apply border border-secondary-actions m-1 p-1 cursor-pointer rounded-sm h-7.5;
      &--color-bg {
        @apply h-5 w-6 rounded-sm;
      }
    }
    &-item:hover, &-item-active {
      @apply border border-active-elements rounded-sm transition duration-500 ease-in-out;
    }
  }
  @media only screen and (max-width: 680px) {
    &--list {
      &--wide {
        @apply px-1;
        max-width: $max-width-list-tall;
      }
    }
  }
}
</style>
