import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { genericComponent, propsFactory } from '@/utils'

export const makeUSemiCircleLGProps = propsFactory(
  {
    shape: {
      type: String,
      default: 'circle',
    },
    size: {
      type: String,
      default: 'lg',
    },
    progressDashoffset: {
      type: Number,
      default: 0,
    },
    progress: {
      type: Number,
      default: 0,
    },

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

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

  props: makeUSemiCircleLGProps(),

  setup(props) {
    return () =>
      props.shape === 'semi-circle' && props.size === 'lg' ? (
        <svg
          width="280"
          height="266"
          viewBox="0 0 280 266"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M266 140C266 123.453 262.741 107.069 256.409 91.7819C250.077 76.4949 240.796 62.6047
            229.095 50.9046C217.395 39.2044 203.505 29.9233 188.218 23.5912C172.931 17.2591 156.547
            14 140 14C123.453 14 107.069 17.2591 91.782 23.5911C76.4949 29.9232 62.6048 39.2043
            50.9046 50.9045C39.2044 62.6047 29.9233 76.4948 23.5912 91.7818C17.2591 107.069 14
            123.453 14 140"
            class="stroke-gray-200"
            stroke-width="28"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M14 140C14 123.453 17.2591 107.069 23.5912 91.7819C29.9233 76.4949 39.2044 62.6047
            50.9046 50.9045C62.6047 39.2044 76.4949 29.9233 91.7819 23.5912C107.069 17.2591 123.453
            14 140 14C156.547 14 172.931 17.2591 188.218 23.5912C203.505 29.9233 217.395 39.2044
            229.095 50.9046C240.796 62.6047 250.077 76.4949 256.409 91.7819C262.741 107.069 266
            123.453 266 140"
            class={[
              props.progress === 0 ? 'stroke-gray-200' : 'stroke-primary-600',
              'transition-width duration-400 ease-in',
            ]}
            stroke-width="28"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-dasharray="395"
            stroke-dashoffset={props.progressDashoffset}
          />
        </svg>
      ) : null
  },
})

export type USemiCircleLG = InstanceType<typeof USemiCircleLG>