lifeto-shop/src/components/inventory/index.tsx

import { useAtom, useAtomValue, useSetAtom } from 'jotai'
import { FaArrowLeft, FaArrowRight } from 'react-icons/fa'
import {
  clearItemSelectionActionAtom,
  filteredCharacterItemsAtom,
  inventoryFilterAtom,
  inventoryPageRangeAtom,
  itemSelectionSelectAllFilterActionAtom,
  itemSelectionSelectAllPageActionAtom,
  paginateInventoryActionAtom,
  preferenceInventorySearch,
  selectedCharacterAtom,
  setInventoryFilterTabActionAtom,
} from '@/state/atoms'
import { InventoryTargetSelector } from './movetarget'
import { InventoryTable } from './table'

const sections = [
  { name: 'all', value: '' },
  { name: 'consume', value: '1' },
  { name: 'equip', value: '2' },
  { name: 'drill', value: '3' },
  { name: 'pet', value: '4' },
  { name: 'etc', value: '5' },
]

const cardSections = [
  { name: 'skill', value: '10' },
  { name: 'char', value: '11' },
  { name: 'mon', value: '12' },
  { name: 'fortune', value: '13' },
  { name: 'secret', value: '14' },
  { name: 'arcana', value: '15' },
]

const InventoryTabs = () => {
  const inventoryFilter = useAtomValue(inventoryFilterAtom)
  const setInventoryFilterTab = useSetAtom(setInventoryFilterTabActionAtom)
  const inventoryRange = useAtomValue(inventoryPageRangeAtom)
  const items = useAtomValue(filteredCharacterItemsAtom)
  const sharedStyle = 'hover:cursor-pointer hover:bg-gray-200 px-2 pr-4 border border-gray-200'
  const selectedStyle = 'bg-gray-200 border-b-2 border-black-1'
  return (
    <div className="flex flex-row gap-1 justify-between">
      <div className="flex flex-col gap-1">
        <div className="flex flex-row gap-1">
          {sections.map(x => {
            return (
              <div
                onClick={() => {
                  setInventoryFilterTab(x.value)
                }}
                key={x.name}
                className={`${sharedStyle}
${inventoryFilter.tab === x.value ? selectedStyle : ''}`}
              >
                {x.name}
              </div>
            )
          })}
        </div>
        <div className="flex flex-row gap-1">
          {cardSections.map(x => {
            return (
              <div
                onClick={() => {
                  setInventoryFilterTab(x.value)
                }}
                key={x.name}
                className={`${sharedStyle}
${inventoryFilter.tab === x.value ? selectedStyle : ''}`}
              >
                {x.name}
              </div>
            )
          })}
        </div>
      </div>
      <div className="flex flex-row gap-1 items-center px-1 bg-yellow-100">
        <div className="whitespace-pre select-none">
          {inventoryRange.start}..{inventoryRange.end}/{items.length}{' '}
        </div>
      </div>
    </div>
  )
}

export const Inventory = () => {
  const selectedCharacter = useAtomValue(selectedCharacterAtom)
  const clearItemSelection = useSetAtom(clearItemSelectionActionAtom)

  const addPageItemSelection = useSetAtom(itemSelectionSelectAllPageActionAtom)
  const addFilterItemSelection = useSetAtom(itemSelectionSelectAllFilterActionAtom)
  const [search, setSearch] = useAtom(preferenceInventorySearch)

  const paginateInventory = useSetAtom(paginateInventoryActionAtom)

  if (!selectedCharacter) {
    return <div>select a character</div>
  }
  return (
    <div className={`flex flex-col h-full w-full`}>
      <div className="flex flex-col py-2 flex-0 justify-between h-full">
        <div className="flex flex-row justify-between">
          <div className="flex flex-row gap-2">
            <div
              className="whitespace-pre bg-blue-200 px-2 py-1 rounded-xl hover:cursor-pointer hover:bg-blue-300"
              onClick={() => {
                addPageItemSelection()
              }}
            >
              select filtered
            </div>
            <div
              className="whitespace-pre bg-blue-200 px-2 py-1 rounded-xl hover:cursor-pointer hover:bg-blue-300"
              onClick={() => {
                addFilterItemSelection()
              }}
            >
              select page
            </div>
            <div
              className="whitespace-pre bg-blue-200 px-2 py-1 rounded-xl hover:cursor-pointer hover:bg-blue-300"
              onClick={() => {
                clearItemSelection()
              }}
            >
              clear{' '}
            </div>
          </div>
          <div className="flex flex-row">
            <InventoryTargetSelector />
            <div
              onClick={_e => {
                // sendOrders()
              }}
              className="hover:cursor-pointer whitespace-preborder border-black-1 bg-orange-200 hover:bg-orange-300 px-2 py-1"
            >
              Move Selected
            </div>
          </div>
        </div>

        <div className="flex flex-row gap-2 justify-between">
          <div className="flex flex-row gap-0 items-center">
            <input
              type="text"
              value={search}
              className="border border-black-1 px-2 py-1"
              placeholder="search..."
              onChange={e => {
                setSearch(e.target.value)
              }}
            />
            <div
              className="hover:cursor-pointer border border-black-1 bg-green-200 hover:bg-green-300 px-2 py-1 h-full flex items-center"
              onClick={() => {
                paginateInventory(-1)
              }}
            >
              <FaArrowLeft />
            </div>
            <div
              className="hover:cursor-pointer border border-black-1 bg-green-200 hover:bg-green-300 px-2 py-1 h-full flex items-center"
              onClick={() => {
                paginateInventory(1)
              }}
            >
              <FaArrowRight />
            </div>
          </div>
        </div>
      </div>
      <InventoryTabs />
      <div className="flex flex-col flex-1 h-full border border-black-2">
        <InventoryTable />
      </div>
    </div>
  )
}