import ViewSwitch, { VIEWDATA } from '@components/ViewSwitch'
import useLanguage from '@hooks/useLanguage'
import { IconHome } from '@tabler/icons-solidjs'
import { createSignal } from 'solid-js'

import { A } from '@solidjs/router'
import {
  IconHome2,
  IconHomeDot,
  IconPencil,
  IconSquareRoundedPlus,
  IconTrash,
} from '@tabler/icons-solidjs'
import './house.scss'

export default function House() {
  const { language } = useLanguage()
  const [view, setView] = createSignal(VIEWDATA['list'])

  const onEdit = () => {
    console.log('edit')
  }

  const onDelete = () => {
    console.log('delete')
  }

  return (
    <div class="house">
      <div class="flex items-center gap-2 mb-5 text-xl">
        <span class="text-secondary">
          <IconHome size={30} />
        </span>
        {language.ui.house}
      </div>
      <div class="page-topbar flex justify-between mb-4">
        <ViewSwitch switchView={setView} />
        <A
          href="/house/create"
          class="btn btn-success text-white hover:text-white btn-sm"
        >
          <IconSquareRoundedPlus size={15} />
          {language.ui.createNew}
        </A>
      </div>
      <div
        class="view-layout scroll-shadow-horizontal no-scrollbar"
        classList={{
          'view-list': view() === VIEWDATA['list'],
          'view-grid': view() === VIEWDATA['grid'],
        }}
      >
        <div class="view-table">
          <div class="row view-head">
            <div class="col w-1/12">{language.table.columnName.no}</div>
            <div class="col w-1/12">{language.table.columnName.icon}</div>
            <div class="col w-4/12">{language.table.columnName.name}</div>
            <div class="col w-4/12">{language.table.columnName.address}</div>
            <div class="col w-2/12">{language.table.columnName.action}</div>
          </div>
          <div class="row view-item">
            <div class="col hide w-1/12">1</div>
            <div class="col w-1/12">
              <IconHome2 size={21} />
            </div>
            <div class="col w-4/12">Nhà 1</div>
            <div class="col w-4/12">Data 4</div>
            <div class="col actionbar w-2/12">
              <button
                class="btn btn-ghost btn-sm px-1 text-blue-500 mr-2"
                onClick={onEdit}
              >
                <IconPencil size={20} />
              </button>
              <button
                class="btn btn-ghost btn-sm px-1 text-red-500"
                onClick={onDelete}
              >
                <IconTrash size={20} />
              </button>
            </div>
          </div>
          <div class="row view-item">
            <div class="col hide w-1/12">2</div>
            <div class="col w-1/12">
              <IconHomeDot size={21} />
            </div>
            <div class="col w-4/12">Nhà 2</div>
            <div class="col w-4/12">Data 4</div>
            <div class="col actionbar w-2/12">
              <button
                class="btn btn-ghost btn-sm px-1 text-blue-500 mr-2"
                onClick={onEdit}
              >
                <IconPencil size={20} />
              </button>
              <button
                class="btn btn-ghost btn-sm px-1 text-red-500"
                onClick={onDelete}
              >
                <IconTrash size={20} />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
