import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { genericComponent, propsFactory } from '@/utils'
import { ExtractPropTypes, computed } from 'vue'
import { UTooltip } from '../UTooltip/UTooltip'

export const makeUProgressBarProps = propsFactory(
  {
    progress: {
      type: Number,
      default: 0,
      required: false,
    },
    label: {
      type: String,
      default: 'none',
      required: false,
    },
    width: {
      type: String,
      default: '100%',
      required: false,
    },

    ...makeComponentProps(),
    ...makeTagProps(),
  },
  'UProgressBar'
)

export type UProgressBarProps = ExtractPropTypes<typeof makeUProgressBarProps>

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

  props: makeUProgressBarProps(),

  setup(props) {
    const progressBarWrapperClasses = computed(() => {
      let classes = ''
      if (props.label === 'right') {
        classes = 'flex gap-3 items-center'
      } else if (props.label === 'bottom') {
        classes = 'flex flex-col items-end gap-2'
      }

      return classes
    })

    const tooltipFloatingPositionStyles = computed(() => {
      return `left: ${props.progress - 6}%;`
    })

    const tooltipClasses = computed(() => ({
      ['-top-0.85']: props.label === 'top floating',
      ['-bottom-68']: props.label === 'bottom floating',
    }))

    const progressBarWidth = computed<string>(() => {
      return props.width === '100%' || !props.width
        ? '100%'
        : props.width + 'px'
    })

    return () => (
      <div
        class={[props.class, 'progressbar-container relative']}
        style={{ width: progressBarWidth.value }}
      >
        <div class={[progressBarWrapperClasses.value, 'progressbar-wrapper']}>
          <div
            class={`progress-bar transition-width duration-500 ease-in h-2 bg-gray-200 rounded 
            overflow-hidden relative`}
            style={{ width: progressBarWidth.value }}
          >
            <div
              class={
                'bg-primary-600 h-full rounded progress transition-width duration-500 ease-in'
              }
              style={{
                width: props.progress === 0 ? '1.5%' : `${props.progress}%`,
              }}
            ></div>
          </div>
          {props.label === 'right' || props.label === 'bottom' ? (
            <span class="text-text-sm font-medium">{`${props.progress}%`}</span>
          ) : null}
        </div>
        <div
          class={[
            tooltipClasses.value,
            'absolute transition-width duration-500 ease-in',
          ]}
          style={tooltipFloatingPositionStyles.value}
        >
          {props.label === 'top floating' ||
          props.label === 'bottom floating' ? (
            <UTooltip position="none top" theme="light" always={true}>
              {{
                tooltipToggle: () => <span class="opacity-0">Icon</span>,
                text: () => `${props.progress}%`,
              }}
            </UTooltip>
          ) : null}
        </div>
      </div>
    )
  },
})

export type UProgressBar = InstanceType<typeof UProgressBar>