<template>
  <div
    ref="reference"
    class="mm-color-picker-box">
    <div
      class="mm-color-picker-toggle"
      @click="toggle">
      <span
        :style="{
          background: bgColor
        }"
        class="mm-color-picker-toggle-value">
        <ui-icon
          class="mm-color-picker-toggle-icon"
          name="chevrondown"
          size="12"
          fill="#fff"
          hover-fill="#eee"></ui-icon>
      </span>
    </div>

    <ui-popper
      v-if="!disabled"
      :visible.sync="localVisible"
      target="reference"
      class="mm-color-picker-popper"
      @after-enter="$emit('after-enter')"
      @after-leave="onLeave">
      <div
        class="mm-color-picker">
        <div class="mm-color-picker-device">
          <picker :color="color"></picker>
          <hue :color="color"></hue>
        </div>
        <div
          v-show="alpha"
          class="mm-color-picker-device">
          <alpha :color="color"></alpha>
          <span
            :style="{
              background: bgColor
            }"
            class="mm-color-picker-device-value"></span>
        </div>

        <div
          v-if="predefineList && predefineList.length"
          class="mm-color-picker-device">
          <predefine
            :color="color"
            :predefine="predefineList"></predefine>
        </div>

        <div class="mm-color-picker-tools">
          <ui-input
            v-model="colorValue"
            size="small"
            class="mm-color-picker-tools-value"
            @enter="changeColor"></ui-input>

          <ui-button
            size="small"
            @click="resetValue">
            {{ t("ui.colorPicker.reset") }}
          </ui-button>
          <ui-button
            size="small"
            type="primary"
            @click="enterValue">
            {{ t("ui.colorPicker.confirm") }}
          </ui-button>
        </div>
      </div>
    </ui-popper>
  </div>
</template>

<script>
import Popper from "../popper"
import Icon from "../icon"
import Input from "../input"
import Button from "../button"

import visible from "../../mixins/visible"
import locale from "../../mixins/locale"
import { TranslatorColor } from "../../utils/tinyColor"
import alpha from "./component/alpha-slider"
import hue from "./component/hue-slider"
import picker from "./component/panel"
import predefine from "./component/predefine"
import config from "../../managers/config"

config.defaults({
  "ColorPicker.format": "rgb",
  "ColorPicker.alpha": true,
  "ColorPicker.predefineList": [],
})

export default {
  name: "mm-color-picker",
  components: {
    "ui-icon": Icon,
    "ui-popper": Popper,
    "ui-input": Input,
    "ui-button": Button,
    alpha,
    hue,
    picker,
    predefine,
  },
  mixins: [visible, locale],
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: "black",
    },
    format: {
      type: String,
      default: () => config.get("ColorPicker.format"),
      validator(value) {
        return ["rgb", "hsl", "hex", "hex8"].includes(value)
      },
    },
    predefineList: {
      type: Array,
      default: () => config.get("ColorPicker.predefineList"),
    },
    alpha: {
      type: Boolean,
      default: () => config.get("ColorPicker.alpha"),
    },
  },
  data() {
    return {
      color: new TranslatorColor(this.value),
      colorValue: "",
    }
  },
  computed: {
    bgColor() {
      return this.getColor("rgb")
    },
  },
  watch: {
    "color.value": {
      immediate: true,
      handler() {
        this.colorValue = this.getColor(this.format)
      },
    },
  },
  methods: {
    changeColor(event) {
      this.color.set(event.target.value)
    },
    onLeave() {
      if (this.value !== this.colorValue) {
        this.resetValue()
      }

      this.$emit("after-leave")
    },
    resetValue() {
      this.color.set(this.value)
    },
    enterValue() {
      this.$emit("input", this.colorValue)
      this.localVisible = false
    },
    getColor(type) {
      return this.color.toString(type)
    },
    setColor(color) {
      this.color.set(color)
      this.$nextTick(() => {
        this.enterValue()
      })
      return this.getColor(this.format)
    },
  },
}
</script>
