"use client"

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

interface IProps {
  selected: string
  setSelected: (value: string) => void
  temp: string
  setTemp: (value: string) => void
  itemList: any[]
  pre?: string
  classNameBtnSelect?: string
}

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

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

  const handleApply = () => {
    props?.setSelected(props?.temp)
    setOpen(false)
  }

  const handleCancel = () => {
    props?.setTemp(props?.selected)
    setOpen(false)
  }

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

  const menu = (
    <div>
      <div className="mb-3.5 text-base leading-[24px] font-semibold">{trans("please_select_one")}</div>
      <Radio.Group
        className={classNames("!mb-6 !w-full", RadioGroupCss)}
        onChange={handleRadioChange}
        value={props?.temp}>
        <Space
          size={0}
          className="divide-y"
          direction="vertical">
          {props?.itemList?.map((item) => (
            <Radio
              className="!py-4 w-full hover:text-[var(--primary--70)]"
              value={item?.value}>
              {item?.label}
            </Radio>
          ))}
        </Space>
      </Radio.Group>
      <div className="flex justify-end">
        <Button
          onClick={handleApply}
          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 ${props?.classNameBtnSelect || ""}`}>
        {`${props?.pre || ""}${(props?.pre && ": ") || ""}${find(props?.itemList, { value: props?.selected })?.label}`}
        <FontAwesomeIcon
          icon={open ? faAngleUp : faAngleDown}
          className="!w-5 !h-5 ml-1"
        />
      </Button>
    </Dropdown>
  )
}

export default CustomDropDownSelect