import { Layer, ArrowRight2, Book1 } from 'iconsax-react'
import { clx } from '@/helpers/utils'
import { useState } from 'react'
import PagesPanel from './PagesPanel'
import LayersList from './LayersList'

type TabType = 'pages' | 'layers'

type LayersPanelProps = {
  isOpen: boolean
  setIsOpen: (isOpen: boolean) => void
}

const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
  const [activeTab, setActiveTab] = useState<TabType>('pages')

  if (!isOpen) {
    return (
      <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
        <div className="bg-white rounded-t-[32px] rounded-b-[32px] w-16 h-full flex flex-col items-center gap-4 p-4">
          <button
            onClick={() => {
              setActiveTab('pages')
              setIsOpen(true)
            }}
            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
          >
            <Book1 size={24} color="black" />
          </button>
          <button
            onClick={() => {
              setActiveTab('layers')
              setIsOpen(true)
            }}
            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
          >
            <Layer size={24} color="black" />
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
      <div className="bg-white rounded-l-4xl w-16 h-full flex flex-col items-center gap-4 p-4">
        <button
          onClick={() => {
            setActiveTab('pages')
          }}
          className={clx(
            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
            activeTab === 'pages' ? 'bg-white' : 'hover:bg-gray-200'
          )}
        >
          <Book1 variant={activeTab === 'pages' ? 'Bold' : 'Outline'} size={24} color="black" />
        </button>

        <button
          onClick={() => {
            setActiveTab('layers')
          }}
          className={clx(
            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
            activeTab === 'layers' ? 'bg-white' : 'hover:bg-gray-200'
          )}
        >
          <Layer variant={activeTab === 'layers' ? 'Bold' : 'Outline'} size={24} color="black" />
        </button>
      </div>

      <div className="fixed border-l border-border left-20 top-[100px] bottom-4 z-30 flex flex-col w-[232px]">
        <div className="bg-white rounded-r-4xl flex flex-col h-full">
          <div className="flex items-center justify-between p-4 border-b border-border">
            <div className="flex items-center gap-3">
              <button
                onClick={() => setIsOpen(false)}
                className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
              >
                <ArrowRight2 size={20} color="black" />
              </button>
              <h2 className="text-lg font-medium">
                {activeTab === 'pages' ? 'صفحات' : 'لایه ها'}
              </h2>
            </div>
          </div>

          {activeTab === 'pages' ? <PagesPanel /> : <LayersList />}
        </div>
      </div>
    </div>
  )
}

export default LayersPanel