<script lang="ts" setup>
import { ref, useAttrs } from 'vue'
import { useSidebar } from '~/composables/useSidebar'
import { Link } from '@inertiajs/vue3'
import { siteIcon } from '~/assets/icons'

const { isOpen } = useSidebar()
const activeClass = ref('bg-gray-600/25 text-gray-100 border-gray-100')
const inactiveClass = ref(
  'border-gray-900 text-gray-500 hover:bg-gray-600/25 hover:text-gray-100'
)
const route = useAttrs()
console.log(route)
</script>

<template>
  <div class="flex h-full">
    <!-- Backdrop -->
    <div
      :class="isOpen ? 'block' : 'hidden'"
      class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"
      @click="isOpen = false"
    />
    <!-- End Backdrop -->

    <div
      :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
      class="fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:h-full lg:translate-x-0 lg:static lg:inset-0"
    >
      <div class="flex items-center justify-center mt-8">
        <div class="flex items-center">
          <img :src="siteIcon" style="width: 64px; height: 64px; fill: aliceblue" />

          <span class="mx-2 text-2xl font-semibold text-white">PC CREATOR</span>
        </div>
      </div>

      <nav class="mt-10">
        <Link
          :class="[$page.url.startsWith('/computers') ? activeClass : inactiveClass]"
          class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
          href="/computers"
        >
          <svg
            class="h-5 w-5"
            fill="currentColor"
            viewBox="0 0 512.000000 512.000000"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g stroke="none" transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">
              <path
                d="M660 5089 c-116 -59 -216 -180 -257 -314 -17 -57 -18 -120 -18 -1140 0 -1014 1 -1082 18 -1112 31 -58 53 -63 287 -63 l210 0 0 1090 0 1090 1660 0 1660 0 0 -1090 0 -1090 210 0 c234 0 256 5 287 63 17 30 18 98 18 1112 0 1020 -1 1083 -18 1140 -41 134 -141 255 -257 314 l-63 31 -1837 0 -1837 0 -63 -31z m1948 -157 c17 -22 15 -62 -5 -84 -34 -38 -103 -11 -103 42 0 61 70 89 108 42z"
              />
              <path
                d="M2055 3549 c-38 -5 -92 -15 -119 -22 l-49 -13 386 -334 c430 -372 439 -382 438 -489 0 -33 -7 -76 -16 -98 -11 -25 -100 -122 -272 -295 -290 -290 -308 -303 -419 -296 -46 3 -72 11 -102 31 -23 15 -188 197 -369 406 -180 209 -331 380 -334 380 -16 2 -40 -178 -40 -289 2 -395 212 -734 566 -912 167 -85 319 -113 545 -104 125 6 166 4 214 -9 72 -19 145 -55 198 -96 21 -17 261 -304 533 -637 271 -334 510 -620 530 -636 143 -112 323 -132 487 -55 87 42 351 304 395 394 67 133 70 263 10 389 -56 119 8 61 -852 760 -425 345 -497 411 -535 486 -48 97 -54 135 -55 370 -1 197 -4 234 -22 302 -52 185 -134 330 -262 462 -168 174 -374 275 -616 305 -101 12 -139 12 -240 0z m2116 -2684 c102 -35 169 -130 169 -239 -1 -177 -161 -295 -332 -244 -48 14 -123 78 -147 127 -72 141 5 315 159 362 42 12 104 10 151 -6z"
              />
              <path
                d="M380 2259 c-19 -12 -112 -115 -208 -231 l-173 -210 3 -161 c3 -183 12 -212 80 -278 74 -71 41 -69 917 -69 l786 1 -92 38 c-371 154 -651 476 -749 859 l-18 72 -256 0 c-240 0 -257 -2 -290 -21z m92 -606 c79 -79 25 -213 -87 -213 -127 0 -174 164 -66 234 41 26 115 16 153 -21z"
              />
              <path
                d="M3465 2258 c15 -51 63 -95 383 -355 l335 -273 316 0 c354 0 361 -1 361 -64 0 -63 -9 -65 -274 -68 l-237 -3 114 -92 114 -93 165 0 c190 0 236 11 296 69 68 66 77 95 80 278 l3 162 -178 215 c-137 165 -187 218 -216 230 -33 14 -116 16 -653 16 l-615 0 6 -22z"
              />
            </g>
          </svg>

          <span class="mx-4">Computers</span>
        </Link>

        <Link
          :class="[$page.url.startsWith('/components') ? activeClass : inactiveClass]"
          class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
          href="/components"
        >
          <svg
            class="w-5 h-5"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M5 3C3.89543 3 3 3.89543 3 5V7C3 8.10457 3.89543 9 5 9H7C8.10457 9 9 8.10457 9 7V5C9 3.89543 8.10457 3 7 3H5Z"
            />
            <path
              d="M5 11C3.89543 11 3 11.8954 3 13V15C3 16.1046 3.89543 17 5 17H7C8.10457 17 9 16.1046 9 15V13C9 11.8954 8.10457 11 7 11H5Z"
            />
            <path
              d="M11 5C11 3.89543 11.8954 3 13 3H15C16.1046 3 17 3.89543 17 5V7C17 8.10457 16.1046 9 15 9H13C11.8954 9 11 8.10457 11 7V5Z"
            />
            <path
              d="M11 13C11 11.8954 11.8954 11 13 11H15C16.1046 11 17 11.8954 17 13V15C17 16.1046 16.1046 17 15 17H13C11.8954 17 11 16.1046 11 15V13Z"
            />
          </svg>

          <span class="mx-4">Components</span>
        </Link>
      </nav>
    </div>
  </div>
</template>
