import { useLocation, useParams, useSearchParams } from 'react-router-dom'
import { useEffect, useState } from 'react'
import Container from '@/components/shared/Container'
import Grid from './Grid'
import { FaList, FaTable, FaTh, FaUser } from 'react-icons/fa'
import { useStoreState } from '@/store/store'
import classNames from 'classnames'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { GridDto } from '@/proxy/form/models'
import Card from './Card'
import { Button } from '@/components/ui'
import Pivot from './Pivot'
import { getList } from '@/services/form.service'
import { Loading } from '@/components/shared'
import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'

const List = () => {
  const params = useParams()
  const { translate } = useLocalization()
  const [searchParams] = useSearchParams()
  const listFormCode = params?.listFormCode ?? ''
  const [viewMode, setViewMode] = useState<'grid' | 'card' | 'pivot'>()
  const mode = useStoreState((state) => state.theme.mode)
  const [gridDto, setGridDto] = useState<GridDto>()
  const MenuIcon = useCurrentMenuIcon('w-5 h-5')

  const initializeGridAsync = async () => {
    const response = await getList({ listFormCode })
    setGridDto(response.data)
  }

  useEffect(() => {
    initializeGridAsync()
  }, [listFormCode])

  useEffect(() => {
    if (!gridDto) {
      return
    }

    setViewMode(gridDto?.gridOptions?.layoutDto.defaultLayout)
  }, [gridDto])

  if (!listFormCode) {
    return null
  }

  return (
    <Container>
      {!gridDto ? (
        <Loading loading={true} />
      ) : (
        <>
          <div
            className={classNames('flex items-center border-solid gap-1 pb-1', {
              'border-gray-100': mode === 'light',
              'border-neutral-700': mode === 'dark',
            })}
          >
            <div className="flex items-center gap-2">
              {MenuIcon}
              <h4 className="text-slate-700 text-sm font-medium leading-none">
                {translate('::' + gridDto?.gridOptions?.title)}
              </h4>
            </div>

            {gridDto?.gridOptions?.description === gridDto?.gridOptions?.title ? (
              <p className="mr-auto"></p>
            ) : (
              <p className="text-slate-500 text-xs mr-auto ml-2 leading-none">
                {translate('::' + gridDto?.gridOptions?.description)}
              </p>
            )}

            <div className="flex gap-1">
              {gridDto?.gridOptions?.layoutDto.grid && (
                <Button
                  size="xs"
                  variant={viewMode === 'grid' ? 'solid' : 'default'}
                  onClick={() => setViewMode('grid')}
                  title="Grid Görünümü"
                >
                  <FaList className="w-4 h-4" />
                </Button>
              )}

              {gridDto?.gridOptions?.layoutDto.card && (
                <Button
                  size="xs"
                  variant={viewMode === 'card' ? 'solid' : 'default'}
                  onClick={() => setViewMode('card')}
                  title="Kart Görünümü"
                >
                  <FaTh className="w-4 h-4" />
                </Button>
              )}
              {gridDto?.gridOptions?.layoutDto.pivot && (
                <Button
                  size="xs"
                  variant={viewMode === 'pivot' ? 'solid' : 'default'}
                  onClick={() => setViewMode('pivot')}
                  title="Pivot Görünümü"
                >
                  <FaTable className="w-4 h-4" />
                </Button>
              )}
            </div>
          </div>

          {viewMode === 'pivot' ? (
            <Pivot
              listFormCode={listFormCode}
              searchParams={searchParams}
              isSubForm={false}
              gridDto={gridDto}
            />
          ) : viewMode === 'card' ? (
            <Card
              listFormCode={listFormCode}
              searchParams={searchParams}
              isSubForm={false}
              gridDto={gridDto}
            />
          ) : (
            <Grid
              listFormCode={listFormCode}
              searchParams={searchParams}
              isSubForm={false}
              gridDto={gridDto}
            />
          )}
        </>
      )}
    </Container>
  )
}

export default List