import { ExtractPropTypes } from 'vue'
import { makeComponentProps } from '@/composables/component'
import { makeSizeProps } from '@/composables/size'
import { getColorName } from '../../utils/useColors'
import './UIconStyles.scss'

// Utilities
import { computed } from 'vue'
import { genericComponent, propsFactory, useRender } from '@/utils'
import ColorName from '@/types/colors'

export const makeUParentContainerProps = propsFactory(
  {
    color: { type: String, default: 'primary-700', required: false },
    variant: {
      type: String,
      default: 'default',
      required: false,
    },
    sizeClasses: { type: String },

    ...makeComponentProps(),
    ...makeSizeProps(),
  },
  'UParentContainer'
)

export type UParentContainerProps = ExtractPropTypes<
  typeof makeUParentContainerProps
>

export const UIconParentContainer = genericComponent()({
  name: 'UIconParentContainer',

  props: makeUParentContainerProps(),

  setup(props, { slots }) {
    useRender(() => {
      const isPredefined = computed(() => !!props.sizeClasses)

      const colorBase = computed(() => {
        return getColorName(props.color as ColorName)
      })

      const featuredOuterWrapperClasses = computed(() => {
        return {
          [`bg-${colorBase.value}-100  rounded-full`]:
            props.variant === 'lightCircle',
          [`bg-${colorBase.value}-50 rounded-full`]:
            props.variant === 'lightCircleOutline',
          [`bg-${colorBase.value}-700 rounded-full`]:
            props.variant === 'darkCircle',
          [`bg-${colorBase.value}-100 rounded-md`]:
            props.variant === 'lightSquare',
          [`bg-${colorBase.value}-600 rounded-md`]:
            props.variant === 'midSquare',
          [`bg-${colorBase.value}-800 rounded-md`]:
            props.variant === 'darkSquare',
          'w-fit h-fit': props.variant === 'default',
          'flex items-center justify-center': true,
        }
      })

      const featuredOuterWrapperStyles = computed(() => {
        return !isPredefined.value
          ? {
              width: `${
                (props.variant !== 'default' ? 2 : 1) * parseInt(props.size)
              }px`,
              height: `${
                (props.variant !== 'default' ? 2 : 1) * parseInt(props.size)
              }px`,
            }
          : {}
      })

      const featuredInnerWrapperClasses = computed(() => {
        return {
          [`bg-${colorBase.value}-100 rounded-full`]:
            props.variant === 'lightCircleOutline' ||
            props.variant === 'lightCircle',
          [`bg-${colorBase.value}-600 rounded-full`]:
            props.variant === 'darkCircle',
          [`bg-${colorBase.value}-100 rounded-md`]:
            props.variant === 'lightSquare',
          [`bg-${colorBase.value}-600 rounded-md`]:
            props.variant === 'midSquare',
          [`bg-${colorBase.value}-800 rounded-md`]:
            props.variant === 'darkSquare',
          ['h-fit w-fit']: props.variant === 'default',
          'flex items-center justify-center': true,
        }
      })

      const featuredInnerWrapperStyles = computed(() => {
        return !isPredefined.value
          ? {
              width: `${
                (props.variant !== 'default' ? 1.33 : 1) * parseInt(props.size)
              }px`,
              height: `${
                (props.variant !== 'default' ? 1.33 : 1) * parseInt(props.size)
              }px`,
            }
          : {}
      })

      return (
        <div
          class={[
            featuredOuterWrapperClasses.value,
            isPredefined.value ? props.sizeClasses : '',
            'inline-block',
          ]}
          style={featuredOuterWrapperStyles.value}
        >
          <div
            class={[featuredInnerWrapperClasses.value, 'inner']}
            style={featuredInnerWrapperStyles.value}
          >
            {slots.default?.()}
          </div>
        </div>
      )
    })

    return {}
  },
})

export type UParentContainer = InstanceType<typeof UIconParentContainer>