"use client"

import React, { useState } from "react"
import { Dropdown, Button, Radio, Space, MenuProps } from "antd"
import { useTranslations } from "next-intl"
import Image from "next/image"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons"
import { find } from "lodash"

interface IProps {
    selectedSort: string
    setSelectedSort: (value: string) => void
    tempSort: string
    setTempSort: (value: string) => void
    handleFilterSortBy: (value: string) => void
}

const CustomDropdownView = (props: IProps) => {
  const trans = useTranslations("wgn")
  const transButton = useTranslations("button")
  const [open, setOpen] = useState(false)

  const handleRadioChange = (e: any) => {
    props?.setTempSort(e.target.value)
  }

  const handleApply = () => {
    props?.setSelectedSort(props?.tempSort)
    setOpen(false)
  }

  const handleCancel = () => {
    props?.setTempSort(props?.selectedSort)
    setOpen(false)
  }

  const handleMenuClick = (e: any) => {
    e.preventDefault()
    setOpen(true)
  }

  const itemFilter = [
    {
      label: trans("no_sort"),
      value: "no_sort",
    },
    {
      label: trans("most_viewed"),
      value: "most_viewed",
    },
    {
      label: trans("least_viewed"),
      value: "least_viewed",
    },
  ]

  const menu = (
    <div>
      <div className="mb-3.5 text-base leading-[24px] font-semibold">{trans("please_select_one")}</div>
      <Radio.Group
        className="!mb-6"
        onChange={handleRadioChange}
        value={props?.tempSort}>
        <Space
            size={0}
          className="divide-y"
          direction="vertical">
          {itemFilter?.map((item) => (
            <Radio
              className="!py-4 w-full hover:text-[var(--primary--70)]"
              value={item?.value}>
              {item?.label}
            </Radio>
          ))}
        </Space>
      </Radio.Group>
      <div>
        <Button
          onClick={
            () => {
              handleApply()
              props.handleFilterSortBy(props?.tempSort)
            }
          }
          type="primary"
          className="mr-1">
          {transButton("apply")}
        </Button>
        <Button onClick={handleCancel}>{transButton("cancel")}</Button>
      </div>
    </div>
  )

  const items: MenuProps["items"] = [
    {
      label: menu,
      key: "0",
    },
  ]

  return (
    <Dropdown
      open={open}
      menu={{ items }}
      trigger={["click"]}>
      <Button
        onClick={handleMenuClick}
        className="!px-5 !py-[0.813rem] !h-auto text-base leading-[22px] font-bold self-start sm:self-auto"
        icon={
          <Image
            src={`/img/icon/db_eye.svg`}
            alt={`db_eye`}
            width={20}
            height={20}
          />
        }>
        {find(itemFilter, { value: props?.selectedSort })?.label}
        <FontAwesomeIcon
          icon={ open ? faAngleUp : faAngleDown}
          className="!w-5 !h-5 ml-1"
        />
      </Button>
    </Dropdown>
  )
}

export default CustomDropdownView