import { IconPackage } from '@tabler/icons-solidjs'
import { For } from 'solid-js'
import { Dynamic } from 'solid-js/web'
import './warehouse.scss'

function PackageItem(props) {
  const { item } = { ...props }
  const isEmpty = item % 2 === 0
  return (
    <a
      href="#"
      class="group/item w-10 h-10 m-[5px] hover:text-white hover:bg-fu-green rounded-[10px] block"
      classList={{ 'bg-fu-warning/30': isEmpty, 'bg-fu-warning': !isEmpty }}
    >
      <div class="bx-dec invisible group-hover/item:visible">
        <div class="section-dec flex items-center absolute bg-fu-green/90 rounded-[10px] p-[10px] shadow-[0_5px_15px_4px_rgba(0, 135, 90, 0.25)]] mt-[20px] ml-[20px]">
          <div class="box-img">
            <Dynamic
              class="mr-[10px] w-20 h-20 text-fu-warning"
              component={IconPackage}
            />
          </div>
          <div class="dec max-w-[200px]">
            <h4 class="text-white mb-[5px] text-base font-bold">
              {isEmpty ? 'Rỗng' : 'Dụng cụ bếp'}
            </h4>
            <p class="line-clamp-3">
              {isEmpty
                ? ''
                : `Nồi cơm điện, Bếp nấu ăn, Lò vi sóng, Máy xay sinh tố, Máy ép trái cây, Lò nướng, Nồi áp suất, Chảo chống dính, Xửng hấp, Bộ nồi chuyên dụng, Dao bếp, Thớt, Hộp đựng thực phẩm, Hũ
                    đựng gia vị , Dụng cụ đo lường, Bộ chén bát, Đũa, Muỗng, Thau, rổ, Khăn lau bếp, Thùng đựng gạo, Bộ ly cốc, Dung dịch tẩy rửa, Giá treo, Vòi rửa thông minh, Máy hút mùi, Máy lọc nước`}
            </p>
          </div>
        </div>
      </div>
    </a>
  )
}

export default function WareHouse() {
  return (
    <div class="warehouse">
      <div class="card w-full bg-base-100 shadow-lg border border-gray-200">
        <div class="card-body">
          <div class="box-header pb-5 mb-5 flex items-center justify-between border-b border-gray-200">
            <h4 class="card-title">Section Overview</h4>
            <div class="box-controls pull-right">
              <input class="form-control no-border bg-base-200 px-2 py-1" id="e" type="date" />
            </div>
          </div>
          <div class="area-in-warehouse grid grid-cols-4">
            <div class="area-block mb-10">
              <div class="area-title text-center text-base font-bold mb-3">Khu bếp</div>
              <div class="area-content flex justify-space-around flex-wrap">
                <For each={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}>{(item) => <PackageItem item={item} />}</For>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
