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

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

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

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

  props: makeUSemiCircleMDProps(),

  setup(props) {
    return () =>
      props.shape === 'semi-circle' && props.size === 'md' ? (
        <svg
          width="240"
          height="228"
          viewBox="0 0 240 228"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M228 120C228 105.817 225.206 91.7734 219.779 78.6702C214.351 65.567 206.396 53.6612 
          196.368 43.6325C186.339 33.6037 174.433 25.6485 161.33 20.221C148.227 14.7935 134.183 12 
          120 12C105.817 12 91.7734 14.7935 78.6702 20.221C65.5671 25.6485 53.6612 33.6037 43.6325 
          43.6324C33.6038 53.6611 25.6485 65.567 20.221 78.6701C14.7935 91.7733 12 105.817 12 120"
            class="stroke-gray-200"
            stroke-width="24"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M12 120C12 105.817 14.7935 91.7733 20.221 78.6702C25.6485 65.567 33.6037 53.6612 
          43.6325 43.6325C53.6612 33.6037 65.567 25.6485 78.6702 20.221C91.7734 14.7935 105.817 12 
          120 12C134.183 12 148.227 14.7935 161.33 20.221C174.433 25.6485 186.339 33.6038 196.368 
          43.6325C206.396 53.6612 214.351 65.567 219.779 78.6702C225.207 91.7734 228 105.817 228 
          120"
            class="stroke-primary-600"
            stroke-width="24"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-dasharray="360"
            stroke-dashoffset={props.progressDashoffset}
          />
        </svg>
      ) : null
  },
})

export type USemiCircleMD = InstanceType<typeof USemiCircleMD>