<template>
  <VCodeBlock
      :code="import_code"
      highlightjs
      label="Import"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <!--  <VCodeBlock-->
  <!--      :code="color_picker_props"-->
  <!--      highlightjs-->
  <!--      label="Props"-->
  <!--      lang="javascript"-->
  <!--      tabs="true"-->
  <!--      theme="hybrid"-->
  <!--  />-->
  <props-details-table :props-data="props_data"/>
  <label class="form-label"> Example</label>
  <AppSkinColorPicker :colors="colors" model-value="default" border-radius="10px"/>
  <VCodeBlock
      :code="demo_code"
      highlightjs
      label="Demo"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <VCodeBlock
      :code="colors_option_value"
      highlightjs
      label="Colors option value example"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
</template>

<script>
import AppSkinColorPicker from "@/components/AppSkinColorPicker";
import VCodeBlock from '@wdns/vue-code-block';
import PropsDetailsTable from "./PropsDetailsTable.vue";

export default {
  name: "TestColorPicker",
  components: {PropsDetailsTable, AppSkinColorPicker, VCodeBlock},
  data() {
    return {
      import_code: "import AppSkinColorPicker from \"@appsbd/vue3-appsbd-libs\";",
      props_data: [
        {
          name: 'align',
          type: 'String',
          default_val: 'left',
          details: "Container position. ex: justify-context-left."
        },
        {
          name: 'model-value',
          type: '[String, Integer]',
          default: '',
          details: 'It sets the default color value based on the label provided in the colors prop.'
        },
        {
          name: 'colors',
          type: 'Array',
          default: '[ ]',
          details: 'It is an array of objects, where each object contains a label a corresponding value and color code like hex, rgb etc, used to define selectable color options.'
        },
        {
          name: 'border-radius',
          type: 'String',
          default: '50%',
          details: 'Container border radius.'
        }
      ],
      color_picker_props: " props: {\n" +
          "    align: {\n" +
          "      type: String,\n" +
          "      default: 'left'\n" +
          "    },\n" +
          "    modelValue: '',\n" +
          "    name: {\n" +
          "      type: String,\n" +
          "      default: \"color\"\n" +
          "    },\n" +
          "    colors: {\n" +
          "      type: Array,\n" +
          "      default: []\n" +
          "    },\n" +
          "    borderRadius: {\n" +
          "      type: String,\n" +
          "      default: \"50%\"\n" +
          "    }\n" +
          "  }",
      demo_code: "<AppSkinColorPicker :colors=\"colors\" model-value=\"default\" border-radius=\"10px\"/>",
      colors_option_value: "colors: [\n" +
          "        {\n" +
          "          label: \"SKIN\",\n" +
          "          name: \"default\",\n" +
          "          color: '#2563eb'\n" +
          "        },\n" +
          "        {\n" +
          "          label: \"SKIN\",\n" +
          "          name: \"cyan\",\n" +
          "          color: '#00acc1'\n" +
          "        },\n" +
          "        {\n" +
          "          label: \"SKIN\"\n" +
          "          , name: \"green\",\n" +
          "          color: '#4caf50'\n" +
          "        },\n" +
          "        {\n" +
          "          label: \"SKIN\",\n" +
          "          name: \"purple\",\n" +
          "          color: '#7b1fa2'\n" +
          "        },\n" +
          "        {\n" +
          "          label: \"SKIN\",\n" +
          "          name: \"violet\",\n" +
          "          color: '#8C59F6'\n" +
          "        },\n" +
          "        {\n" +
          "          label: \"SKIN\",\n" +
          "          name: \"pink\",\n" +
          "          color: '#d2597d'\n" +
          "        },\n" +
          "        {\n" +
          "          label: \"SKIN\",\n" +
          "          name: \"red\",\n" +
          "          color: '#b63431'\n" +
          "        },\n" +
          "        {\n" +
          "          label: \"SKIN\",\n" +
          "          name: \"orange\",\n" +
          "          color: '#d47500'\n" +
          "        },\n" +
          "        {\n" +
          "          label: \"SKIN\",\n" +
          "          name: \"gray\",\n" +
          "          color: '#757575'\n" +
          "        },\n" +
          "        {\n" +
          "          label: \"SKIN\",\n" +
          "          name: \"black\",\n" +
          "          color: '#323232'\n" +
          "        }\n" +
          "      ]",
      colors: [
        {
          label: "SKIN",
          name: "default",
          color: '#2563eb'
        },
        {
          label: "SKIN",
          name: "cyan",
          color: '#00acc1'
        },
        {
          label: "SKIN"
          , name: "green",
          color: '#4caf50'
        },
        {
          label: "SKIN",
          name: "purple",
          color: '#7b1fa2'
        },
        {
          label: "SKIN",
          name: "violet",
          color: '#8C59F6'
        },
        {
          label: "SKIN",
          name: "pink",
          color: '#d2597d'
        },
        {
          label: "SKIN",
          name: "red",
          color: '#b63431'
        },
        {
          label: "SKIN",
          name: "orange",
          color: '#d47500'
        },
        {
          label: "SKIN",
          name: "gray",
          color: '#757575'
        },
        {
          label: "SKIN",
          name: "black",
          color: '#323232'
        }
      ],
    }
  }
}
</script>

<style scoped>

</style>