<template>
  <div class="styleguide">
    <div
      class="sticky top-0 z-40 w-full backdrop-blur flex-none transition-colors duration-500 lg:z-50 lg:border-b lg:border-slate-900/10 dark:border-slate-50/[0.06] bg-white/95 supports-backdrop-blur:bg-white/60 dark:bg-transparent"
    >
      <div class="max-w-7xl mx-auto relative px-4 py-4">
        <h1 class="font-mono text-2xl font-bold">Sugar UI Styletile</h1>
      </div>
    </div>
    <div class="overflow-hidden">
      <div class="max-w-7xl mx-auto relative px-4">
        <div class="styleguide__editor">
          <div lass="styleguide__editor__module">
            <div>Sizes</div>
            <ul>
              <li
                v-for="(size, sizeKey) in themeObjects.sizes"
                :key="`${size}-${sizeKey}`"
              >
                <div class="flex space-x-2 mb-2 border px-6 py-4 rounded">
                  <div class="w-64 px-2">{{ size }}</div>
                  <div class="w-64 px-2">
                    <input
                      v-model="themeVariables[`--sui-size-${size}`]"
                      @input="handleSizeVar(size)"
                      class="sui-color-text w-full outline-none"
                      type="text"
                    />
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="styleguide__editor__module py-2">
            <div class="font-bold flex items-center justify-between">
              Theme Colors
              <button
                class="text-xs p-2 rounded bg-blue-400 text-white"
                @click="buttonGroup = !buttonGroup"
              >
                <span v-if="buttonGroup">close</span>
                <span v-else>open</span>
              </button>
            </div>
            <ul v-if="buttonGroup" class="pl-4 pt-2">
              <li
                v-for="(colorOption, colorOptionKey) in colorOptions"
                :key="`${colorOption.util}-${colorOptionKey}`"
              >
                <theme-prop
                  :property="{
                    name: colorOption.util,
                    cssProp: colorOption.cssProp,
                    value: themeVariables[`--sui-${colorOption.util}`],
                    type: 'color',
                    _prop: colorOption,
                  }"
                  @property="handlePropertyInput"
                />
                <!-- {{ colorOptions }} -->
              </li>
            </ul>
          </div>
          <div class="styleguide__editor__module py-2">
            <div class="font-bold flex items-center justify-between">
              Theme Backgrounds
              <button
                class="text-xs p-2 rounded bg-blue-400 text-white"
                @click="backgroundGroup = !backgroundGroup"
              >
                <span v-if="backgroundGroup">close</span>
                <span v-else>open</span>
              </button>
            </div>
            <ul v-if="backgroundGroup" class="pl-4 pt-2">
              <li
                v-for="(option, optionKey) in backgroundOptions"
                :key="`${option.util}-${optionKey}`"
              >
                <theme-prop
                  :property="{
                    name: option.util,
                    cssProp: option.cssProp,
                    value: themeVariables[`--sui-${option.util}`],
                    type: 'color',
                    _prop: option,
                  }"
                  @property="handlePropertyInput"
                />
                <!-- {{ colorOptions }} -->
              </li>
            </ul>
          </div>
          <div class="styleguide__editor__module py-2">
            <div class="font-bold flex items-center justify-between">
              Theme Borders
              <button
                class="text-xs p-2 rounded bg-blue-400 text-white"
                @click="borderGroup = !borderGroup"
              >
                <span v-if="borderGroup">close</span>
                <span v-else>open</span>
              </button>
            </div>
            <ul v-if="borderGroup" class="pl-4 pt-2">
              <li
                v-for="(option, optionKey) in borderOptions"
                :key="`${option.util}-${optionKey}`"
              >
                <theme-prop
                  :property="{
                    name: option.util,
                    cssProp: option.cssProp,
                    value: themeVariables[`--sui-${option.util}`],
                    type: 'input',
                    _prop: option,
                  }"
                  @property="handlePropertyInput"
                />
                <!-- {{ colorOptions }} -->
              </li>
            </ul>
          </div>
          <div class="styleguide__editor__module py-2">
            <div class="font-bold flex items-center justify-between">
              Theme Typography
              <button
                class="text-xs p-2 rounded bg-blue-400 text-white"
                @click="typoGroup = !typoGroup"
              >
                <span v-if="typoGroup">close</span>
                <span v-else>open</span>
              </button>
            </div>
            <ul v-if="typoGroup" class="pl-4 pt-2">
              <li
                v-for="(option, optionKey) in typoOptions"
                :key="`${option.util}-${optionKey}`"
              >
                <theme-prop
                  :property="{
                    name: option.util,
                    cssProp: option.cssProp,
                    value: themeVariables[`--sui-${option.util}`],
                    type: 'input',
                    _prop: option,
                  }"
                  @property="handlePropertyInput"
                />
                <!-- {{ colorOptions }} -->
              </li>
            </ul>
          </div>
          <div lass="styleguide__editor__module py-2">
            <div class="font-bold flex items-center justify-between">
              raw options
              <button
                class="text-xs p-2 rounded bg-blue-400 text-white"
                @click="rawOptions = !rawOptions"
              >
                toggle
              </button>
            </div>

            <ul v-if="rawOptions">
              <li
                v-for="(util, utilKey) in themeObjects.utils"
                :key="`${util.util}-${utilKey}`"
              >
                <div class="flex flex-col mb-2 border px-4 py-2 rounded">
                  <div class="px-2 text-xs">{{ util.util }}</div>
                  <div class="px-2">
                    <input
                      v-model="themeVariables[`--sui-${util.util}`]"
                      class="sui-color-text w-full outline-none border"
                      :type="
                        util.util.includes('color') ||
                        util.util.includes('background')
                          ? 'color'
                          : 'text'
                      "
                      @input="handleUtilVar(util)"
                    />
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="styleguide__viewer">
          <div
            class="styleguide__viewer__module styleguide__viewer__module--border flex flex-wrap space-x-4"
          >
            <div
              class="w-48 h-48 sui-border-color-primary sui-border-radius-primary sui-border-width-primary sui-background-primary"
            ></div>
            <div class="w-48 h-48 sui-border-color-primary border"></div>
            <div class="w-48 h-48 sui-border-color-secondary border"></div>
            <div
              class="w-48 h-48 sui-border-color-primary sui-border-radius-primary sui-border-width-primary"
            ></div>
            <div
              class="w-48 h-48 sui-border-color-primary sui-border-radius-secondary sui-border-width-secondary"
            ></div>
            <div
              class="w-48 h-48 sui-border-color-primary sui-border-top-left-radius sui-border-top-right-radius sui-border-top-color sui-border-top-width sui-border-left-radius sui-border-left-color sui-border-left-width sui-border-right-radius sui-border-right-color sui-border-right-width sui-border-bottom-left-radius sui-border-bottom-right-radius sui-border-bottom-color sui-border-bottom-width border"
            ></div>
          </div>
          <div
            class="styleguide__viewer__module styleguide__viewer__module--typo flex flex-wrap space-x-4"
          >
            <div>
              <h2 class="sui-font-size-sm-primary">Dies ist eine H2</h2>
              <p>
                Minions ipsum dolor veniam irure sed uuuhhh. Belloo! me want
                bananaaa! Elit elit ti aamoo! Incididunt wiiiii ut gelatooo
                butt. Wiiiii exercitation belloo! Para tú jeje magna elit cillum
                po kass voluptate. Po kass bananaaaa laboris officia tank yuuu!
                Esse et dolore jeje ut et. Tempor commodo baboiii bee do bee do
                bee do tempor. Magna dolore irure ut me want bananaaa!
                Bananaaaa. Qui butt voluptate pepete dolore tempor sit amet
                belloo! Wiiiii et velit voluptate sit amet.
              </p>
              <h3>Dies eine kleinere Überschrift</h3>
              <h4>Und noch kleiner</h4>
              <p>
                Minions <b>ipsum dolor veniam</b> irure sed uuuhhh. Belloo! me
                want bananaaa! Elit elit ti aamoo! Incididunt wiiiii ut gelatooo
                butt. Wiiiii exercitation belloo! Para tú jeje magna elit cillum
                po kass voluptate. <i>Po kass bananaaaa</i> laboris officia tank
                yuuu! Esse et dolore jeje ut et. Tempor commodo baboiii bee do
                bee do bee do tempor. Magna dolore irure ut me want bananaaa!
                Bananaaaa. Qui butt voluptate pepete dolore tempor sit amet
                belloo! Wiiiii et velit voluptate sit amet.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import resolveConfig from 'tailwindcss/resolveConfig'
import { themeObjects } from '../../base/sugarUi'
import tailwindConfig from '@/tailwind.config.js'
import ThemeProp from '~/components/styleguide/ThemeProp.vue'
export default {
  name: 'SugarUiStyleguide',
  components: { ThemeProp },

  data() {
    return {
      themeObjects,
      themeVariables: {},
      buttonGroup: true,
      backgroundGroup: true,
      borderGroup: true,
      typoGroup: true,
      rawOptions: false,
      sugarUiConfig: null,
    }
  },
  computed: {
    colorOptions() {
      return this.createGroup('color')
    },
    backgroundOptions() {
      return this.createGroup('background')
    },
    borderOptions() {
      return this.createGroup('border')
    },
    typoOptions() {
      return this.createGroup('font')
    },
  },
  created() {
    const { zspSugarUi } = resolveConfig(tailwindConfig)
    this.sugarUiConfig = zspSugarUi
    const themeObj = this.themeVariables
    for (const size of this.themeObjects.sizes) {
      const val = this.sugarUiConfig.theme.sizes[size]
      this.$set(this.themeVariables, `--sui-size-${size}`, val || '')
    }

    for (const util of this.themeObjects.utils) {
      this.$set(this.themeVariables, `--sui-${util.util}`, '')
    }

    const border = this.sugarUiConfig.theme.border
    if (border) {
      this.populateValuesFromNestedConfig({
        obj: border,
        themeObj,
        path: 'border',
      })
    }

    const typo = this.sugarUiConfig.theme.typo
    if (typo) {
      this.populateValuesFromNestedConfig({
        obj: typo,
        themeObj,
        path: 'colors',
      })
    }

    const backgrounds = this.sugarUiConfig.theme.backgrounds
    if (backgrounds) {
      this.populateValuesFromNestedConfig({
        obj: backgrounds,
        themeObj,
        valueString: 'background',
        path: 'backgrounds',
      })
    }

    const colors = this.sugarUiConfig.theme.colors
    if (colors) {
      this.populateValuesFromNestedConfig({
        obj: colors,
        themeObj,
        valueString: 'color',
        path: 'colors',
      })
    }
  },

  methods: {
    isObject(item) {
      return item && typeof item === 'object' && !Array.isArray(item)
    },
    populateValuesFromNestedConfig({
      obj,
      themeObj = {},
      mapping = {},
      valueString = null,
      path = null,
    }) {
      // const pathMaker = (path)
      return Object.entries(obj).forEach(([key, args]) => {
        const cssProp = key
          .split(/(?=[A-Z])/)
          .join('-')
          .toLowerCase()
        if (this.isObject(args)) {
          Object.entries(args).forEach(([k, v]) => {
            if (v) {
              themeObj[`--sui-${cssProp}-${k}`] = v
            }
          })
        } else {
          themeObj[`--sui-${valueString}-${cssProp}`] = args
        }
      })
    },
    handlePropertyInput({ prop, value }) {
      const variable = `--sui-${prop.name}`
      this.themeVariables[variable] = value
      this.setCssVar(variable)
      this.setThemeItem(variable, prop)
    },
    handleUtilVar(util) {
      const variable = `--sui-${util.util}`
      this.setCssVar(variable)
      this.setThemeItem(variable, util)
    },
    handleSizeVar(size) {
      const variable = `--sui-size-${size}`
      this.setCssVar(variable)
      this.setThemeItem(variable, { prop: 'size', value: size })
    },
    setCssVar(val) {
      const root = document.documentElement
      if (this.themeVariables[val]) {
        root.style.setProperty(val, this.themeVariables[val])
      }
    },
    setThemeItem(val, ref = null) {
      const value = this.themeVariables[val]
      const config = this.sugarUiConfig
      console.log({ value, ref, config })
    },

    createGroup(val) {
      return this.themeObjects.utils.filter((obj) => obj.util.includes(val))
    },
  },
}
</script>

<style lang="postcss" scoped>
.styleguide__editor {
  @apply block fixed z-20 inset-0 top-[3.9125rem] left-[max(0px,calc(50%-40rem))] right-auto w-[19.5rem] pb-10 pt-10 px-4 overflow-y-auto;
}
.styleguide__viewer {
  @apply pl-[19.5rem] sui-padding-right-sm pt-10;
}
</style>
