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




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)
  console.log("items", items)
  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>
}