import { makeComponentProps } from '@/composables/component'
import { Sizes } from '@/composables/size'
import { computed, ref } from 'vue'

import { UCheckbox } from '@/components/UCheckbox/UCheckbox'
import BaseCheckboxVariant from '@/types/baseCheckboxVariants'
import { UButton } from '@/components/UButton/UButton'
import UntitledColorTypes from '@/types/untitledColorTypes'

import { genericComponent, propsFactory, useRender } from '@/utils'

export const makeUModalActionsProps = propsFactory(
  {
    dualAction: {
      type: Boolean,
      default: true,
    },
    destructive: {
      type: Boolean,
      default: false,
    },
    checkboxControl: {
      type: Boolean,
      default: false,
    },
    smallActions: {
      type: Boolean,
      default: false,
    },
    primaryButtonText: {
      type: String,
      required: true,
    },
    secondaryButtonText: {
      type: String,
      required: false,
    },
    checkboxText: {
      type: String,
      required: false,
    },
    ...makeComponentProps(),
  },
  'UModalActions'
)

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

  props: makeUModalActionsProps(),

  emits: {
    click: (e: MouseEvent) => true,
    check: (isChecked: boolean) => true,
    action: (isPrimary: boolean) => true,
  },

  setup(props, { emit }) {
    const isChecked = ref(false)

    function onClick(e: MouseEvent) {
      emit('click', e)
    }

    function primaryButtonAction() {
      emit('action', true)
    }

    function secondaryButtonAction() {
      emit('action', false)
    }

    function onCheck() {
      isChecked.value = !isChecked.value
      emit('check', isChecked.value)
    }

    const actionButtonsClasses = computed<string>(
      () =>
        `box-border flex gap-3 flex-wrap sm:flex-nowrap order-1 sm:order-2 ${
          props.smallActions && !props.checkboxControl
            ? 'w-full sm:w-auto justify-end'
            : ''
        }
          ${
            props.smallActions && props.checkboxControl
              ? 'w-full sm:w-auto justify-end'
              : 'w-full basis-full flex-1'
          }`
    )

    const secondaryButtonClasses = computed<string>(
      () =>
        `order-2 sm:order-1 justify-center ${
          props.smallActions
            ? 'basis-full flex-1 sm:basis-0 sm:flex-none'
            : 'basis-full flex-1'
        }`
    )

    const primaryButtonClasses = computed<string>(
      () =>
        `order-1 sm:order-2 justify-center ${
          props.smallActions
            ? 'basis-full flex-1 sm:basis-0 sm:flex-none'
            : 'basis-full flex-1'
        }`
    )

    const checkboxClasses = computed<string>(
      () =>
        `hidden sm:flex items-center gap-2 order-2 sm:order-1 ${
          props.smallActions ? 'flex-1 basis-full' : 'basis-full flex-1'
        }`
    )

    const checkboxTextClasses = computed<string>(
      () => `text-text-sm font-medium text-gray-700`
    )

    const checkboxComponentClasses = computed<string>(() => `flex-shrink-0`)

    const actionContainerClasses = computed<string>(
      () =>
        `box-border flex w-full mt-[24px] sm:mt-[32px] flex-nowrap ${
          props.smallActions && !props.checkboxControl
            ? 'justify-end'
            : 'justify-between'
        }`
    )

    useRender(() => (
      <div class={actionContainerClasses.value}>
        {props.checkboxControl ? (
          <div class={checkboxClasses.value}>
            <UCheckbox
              checked={isChecked.value}
              onClick={onCheck}
              class={checkboxComponentClasses.value}
              size={Sizes.sm}
              variant={BaseCheckboxVariant.default}
            ></UCheckbox>
            <div class={checkboxTextClasses.value}>{props.checkboxText}</div>
          </div>
        ) : null}
        <div class={actionButtonsClasses.value} onClick={onClick}>
          {props.dualAction ? (
            <div class={secondaryButtonClasses.value}>
              <UButton
                onClick={secondaryButtonAction}
                size={Sizes.md}
                type={UntitledColorTypes.secondaryGray}
              >
                {props.secondaryButtonText}
              </UButton>
            </div>
          ) : null}

          <div class={primaryButtonClasses.value}>
            <UButton
              onClick={primaryButtonAction}
              size={Sizes.md}
              type={UntitledColorTypes.primary}
              destructive={props.destructive}
            >
              {props.primaryButtonText}
            </UButton>
          </div>
        </div>
      </div>
    ))
    return {
      onCheck,
    }
  },
})

export type UModalActions = InstanceType<typeof UModalActions>