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

export const makeUSidebarLogoProps = propsFactory(
  {
    color: {
      type: String,
      default: 'gray-900',
      required: false,
    },

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

export type USidebarLogoProps = ExtractPropTypes<typeof makeUSidebarLogoProps>

export type USidebarLogoSlots = {
  //
}

export const USidebarLogo = genericComponent<USidebarLogoSlots>()({
  name: 'USidebarLogo',

  props: makeUSidebarLogoProps(),

  emits: {
    click: (e: MouseEvent) => true,
  },

  setup(props, { emit, slots }) {
    return () => (
      <svg
        width="142"
        height="32"
        viewBox="0 0 142 32"
        xmlns="http://www.w3.org/2000/svg"
        class={`fill-${props.color}`}
      >
        <path d="M11.5443 12.2117L9.25354 9.87946C7.70864 11.4456 6.75122 13.6122 6.75122 16.0027C6.75122 18.3935 7.71054 20.555 9.25354 22.1284L11.5443 19.793C10.9634 19.2004 10.5155 18.4691 10.2542 17.6539H18.9038C18.6425 18.4691 18.1946 19.2004 17.6119 19.793L19.9045 22.1284C21.4506 20.555 22.4047 18.3935 22.4047 16.0027C22.4047 13.6122 21.4506 11.4456 19.9045 9.87946L17.6119 12.2117C18.1946 12.804 18.6425 13.5368 18.9038 14.3517H10.2542C10.5155 13.5368 10.9634 12.804 11.5443 12.2117Z" />
        <path d="M22.381 7.35933C24.5609 9.57408 25.907 12.6314 25.907 16.0027C25.907 19.374 24.5609 22.4325 22.381 24.6412L24.6731 26.9785C27.442 24.1649 29.1538 20.2832 29.1538 16.0027C29.1538 11.7214 27.442 7.84043 24.6731 5.02612L22.381 7.35933ZM6.77431 7.35933L4.48192 5.02612C1.71712 7.84043 0.00341797 11.7214 0.00341797 16.0027C0.00341797 20.2832 1.71712 24.1649 4.48192 26.9785L6.77835 24.6453C4.59842 22.4325 3.25014 19.374 3.25014 16.0027C3.25014 12.6323 4.59842 9.57408 6.77431 7.35933Z" />
        <path d="M132.323 15.7784L133.68 13.2498L135.021 15.7784H132.323ZM129.272 21.9535L130.844 18.8304H136.489L138.197 21.9535L141.343 22L136.918 13.0582C136.426 12.0551 136.008 11.3617 135.672 10.9779C135.126 10.3498 134.479 10.0341 133.727 10.0341C132.958 10.0341 132.293 10.3249 131.739 10.9131C131.348 11.3185 130.916 12.0056 130.441 12.9777L126.019 22L129.272 21.9535ZM122.164 10H107.908V13.0271H121.875L109.694 15.7942C109.017 15.9429 108.468 16.2802 108.054 16.8094C107.636 17.3354 107.431 17.9639 107.431 18.6883C107.431 19.6259 107.794 20.4061 108.525 21.025C109.222 21.6099 110.04 21.904 110.976 21.904H124.678V18.7843H111.268L122.814 16.1439C123.541 15.9736 124.132 15.6301 124.57 15.1133C125.015 14.5965 125.235 13.9622 125.235 13.219C125.235 12.2994 124.931 11.5353 124.331 10.9226C123.729 10.3062 123.01 10 122.164 10ZM93.7092 10C93.0716 10 92.5332 10.0711 92.0918 10.2077C91.6475 10.3498 91.2224 10.6193 90.8109 11.0182C90.3995 11.4174 90.1074 11.8353 89.9313 12.2748C89.7584 12.711 89.672 13.2285 89.672 13.8255V18.162C89.672 18.6726 89.7376 19.1 89.8794 19.4498C90.0177 19.7962 90.2626 20.1801 90.6112 20.6071C91.0138 21.1118 91.4552 21.4678 91.9439 21.6814C92.4361 21.8916 93.0116 22 93.6796 22H105.641V18.8304H92.645V17.5676L105.641 17.5335V14.4478H92.5674V13.0582H105.641V10H93.7092ZM72.1134 10.0494V13.1044H78.7257L78.7867 21.9535H81.6702L81.6554 13.0582H88.2811V10.0494H72.1134ZM57.529 18.911H67.6122V13.1692H57.529V18.911ZM69.7864 11.5507C70.0722 11.9159 70.2811 12.2748 70.4092 12.6341C70.5404 12.9897 70.6046 13.4014 70.6046 13.875V18.2887C70.6046 18.7997 70.5196 19.2483 70.3481 19.6322C70.1798 20.016 69.9067 20.4061 69.5295 20.802C69.1569 21.1953 68.7783 21.477 68.392 21.6473C68.0059 21.8176 67.5349 21.904 66.9799 21.904H58.2092C57.6023 21.904 57.0939 21.811 56.6839 21.6224C56.2725 21.4367 55.8727 21.1148 55.4821 20.6569C55.1511 20.2698 54.9218 19.886 54.7874 19.4959C54.6547 19.1091 54.5876 18.6451 54.5876 18.1096V13.6029C54.5876 13.0795 54.6981 12.6092 54.9243 12.1942C55.1215 11.8324 55.4285 11.4606 55.8431 11.0834C56.2577 10.7025 56.6811 10.4395 57.1059 10.2974C57.5321 10.1546 58.0406 10.0806 58.6235 10.0806H67.0293C67.6122 10.0806 68.1266 10.2011 68.5694 10.4395C69.008 10.6812 69.4166 11.0523 69.7864 11.5507Z" />
        <path d="M49.6627 14.8487H39.0365C39.3194 13.7372 39.8968 12.7469 40.672 11.999L38.7118 10C37.081 11.6669 36.0669 13.9609 36.0669 16.5031C36.0669 19.0362 37.081 21.3331 38.7118 23L40.7617 20.9081C39.9289 20.1382 39.3137 19.1045 39.0243 17.928H49.6717C49.3837 19.1012 48.7671 20.1349 47.9386 20.9081L49.9946 23C51.6225 21.3331 52.6381 19.0362 52.6381 16.5031C52.6381 13.9609 51.6225 11.6669 49.9946 10L48.0283 12.0019C48.8006 12.7535 49.378 13.7372 49.6627 14.8487Z" />
      </svg>
    )
  },
})

export type USidebarLogo = InstanceType<typeof USidebarLogo>