import { FilterIcon, X } from 'lucide-react'
import { Button } from '../ui/button'
import { CustomDrawer } from '../ui/drawer'
import { useState } from 'react'
import { CustomAccordion } from '../ui/accordion'
import { Checkbox } from '../ui/checkbox'
import { useRouter } from 'next/navigation'
import { useCurrentLocale } from '@/locales/client'

export const FilterDrawer = ({
  models,
  seats,
  colors,
  prices,
  allModels,
  allSeats,
  allColors,
  allPrices,
  setModels,
  setSeats,
  setColors,
  setPrices,
}: {
  models: string[]
  seats: string[]
  colors: string[]
  prices: string[]
  allModels: { label: string; value: string }[]
  allSeats: { label: string; value: string }[]
  allColors: { label: string; value: string }[]
  allPrices: { label: string; value: string }[]
  setModels: React.Dispatch<React.SetStateAction<string[]>>
  setSeats: React.Dispatch<React.SetStateAction<string[]>>
  setColors: React.Dispatch<React.SetStateAction<string[]>>
  setPrices: React.Dispatch<React.SetStateAction<string[]>>
}) => {
  const [open, setOpen] = useState(false)
  const router = useRouter()
  const locale = useCurrentLocale()

  return (
    <CustomDrawer
      open={open}
      setOpen={setOpen}
      title="Filters"
      footer={
        <div className="text-base-white p-4 md:px-10 md:py-6 h-28 bg-transparent-brown-40 flex items-center justify-between">
          <Button
            onClick={() => {
              setModels([])
              setSeats([])
              setColors([])
              setPrices([])
              router.replace(`/${locale}/catalog`, { scroll: false })
            }}
            variant="ancor-link"
          >
            Reset Filters
          </Button>
          <Button onClick={() => setOpen(false)} variant="primary">
            Show Products
          </Button>
        </div>
      }
      trigger={
        <Button
          variant="secondary"
          LeftIcon={<FilterIcon size={20} className="stroke-neutral-50" />}
        >
          Filter ({[...models, ...seats, ...colors, ...prices].length})
        </Button>
      }
    >
      <div className="text-base-white p-4 md:px-10 md:py-6 overflow-y-auto">
        <div className="flex items-center justify-start flex-wrap gap-2 mt-6">
          {models.map((item, i) => (
            <div
              className="flex items-center gap-2 bg-grey-700 px-4 py-2 rounded-[40px] cursor-pointer hover:bg-grey-600"
              key={i}
            >
              <div className="text-grey-100 label-medium-regular">{item}</div>
              <X
                onClick={() => setModels(models.filter((m) => m !== item))}
                size={16}
                className="stroke-grey-100"
              />
            </div>
          ))}
          {seats.map((item, i) => (
            <div
              className="flex items-center gap-2 bg-grey-700 px-4 py-2 rounded-[40px] cursor-pointer hover:bg-grey-600"
              key={i}
            >
              <div className="text-grey-100 label-medium-regular">{item}</div>
              <X
                onClick={() => setSeats(seats.filter((m) => m !== item))}
                size={16}
                className="stroke-grey-100"
              />
            </div>
          ))}
          {colors.map((item, i) => (
            <div
              className="flex items-center gap-2 bg-grey-700 px-4 py-2 rounded-[40px] cursor-pointer hover:bg-grey-600"
              key={i}
            >
              <div className="text-grey-100 label-medium-regular">{item}</div>
              <X
                onClick={() => setColors(colors.filter((m) => m !== item))}
                size={16}
                className="stroke-grey-100"
              />
            </div>
          ))}
          {prices.map((item, i) => (
            <div
              className="flex items-center gap-2 bg-grey-700 px-4 py-2 rounded-[40px] cursor-pointer hover:bg-grey-600"
              key={i}
            >
              <div className="text-grey-100 label-medium-regular">{item}</div>
              <X
                onClick={() => setPrices(prices.filter((m) => m !== item))}
                size={16}
                className="stroke-grey-100"
              />
            </div>
          ))}
        </div>
        <div className="mt-6">
          <CustomAccordion
            type="multiple"
            options={[
              {
                label: 'Model',
                value: (
                  <div className="flex flex-col gap-4 mt-2">
                    {allModels.map((item, i) => (
                      <Checkbox
                        key={i}
                        label={item.label}
                        checked={models.includes(item.value)}
                        onCheckedChange={(val) =>
                          val
                            ? setModels([...models, item.value])
                            : setModels(models.filter((m) => m !== item.value))
                        }
                      />
                    ))}
                  </div>
                ),
              },
              {
                label: 'Number of Seats',
                value: (
                  <div className="flex flex-col gap-4 mt-2">
                    {allSeats.map((item, i) => (
                      <Checkbox
                        key={i}
                        label={item.label}
                        checked={seats.includes(item.value)}
                        onCheckedChange={(val) =>
                          val
                            ? setSeats([...seats, item.value])
                            : setSeats(seats.filter((m) => m !== item.value))
                        }
                      />
                    ))}
                  </div>
                ),
              },
              {
                label: 'Car color',
                value: (
                  <div className="flex flex-col gap-4 mt-2">
                    {allColors.map((item, i) => (
                      <Checkbox
                        key={i}
                        label={item.label}
                        checked={colors.includes(item.value)}
                        onCheckedChange={(val) =>
                          val
                            ? setColors([...colors, item.value])
                            : setColors(colors.filter((m) => m !== item.value))
                        }
                      />
                    ))}
                  </div>
                ),
              },
              {
                label: 'Price per day',
                value: (
                  <div className="flex flex-col gap-4 mt-2">
                    {allPrices.map((item, i) => (
                      <Checkbox
                        key={i}
                        label={item.label}
                        checked={prices.includes(item.value)}
                        onCheckedChange={(val) =>
                          val
                            ? setPrices([...prices, item.value])
                            : setPrices(prices.filter((m) => m !== item.value))
                        }
                      />
                    ))}
                  </div>
                ),
              },
            ]}
          />
        </div>
      </div>
    </CustomDrawer>
  )
}
