"use client"

import React, { useState } from "react"
import { Select } from "antd"
import lodash from "lodash"
import { SelectRateProps } from "@component/Common/SelectRate/container"
import { useTranslations } from "next-intl"
import Rate from "@component/Common/Rate"
import classNames from "classnames"
import { CustomSelectRateCss } from "./style"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faAngleDown, faX } from "@fortawesome/free-solid-svg-icons"

export const SelectRateComponent = (props: SelectRateProps) => {
  const trans = useTranslations("rate")
  const { options } = props

  const handleClear = () => {
    console.log("haha");
    
    props.formRef.setFieldsValue({ rate: "" })
    props?.setValue("")
  }

  return (
    <Select
      className={classNames("!h-[3.125rem] !mb-0", CustomSelectRateCss)}
      placeholder={trans("select_pl")}
      suffixIcon={
        props?.value ? (
          null
        ) : (
          <FontAwesomeIcon
            icon={faAngleDown}
            className="!w-5 !h-5 ml-1"
          />
        )
      }
      allowClear={{ clearIcon: <FontAwesomeIcon
        icon={faX}
        className="!w-5 !h-5 -mt-1 bg-[var(--secondary-20)]"
        onClick={handleClear}
      /> }}
      optionFilterProp="children"
      {...lodash.omit(props, "options")}>
      {options &&
        options?.map((item: any) => {
          return (
            <Select.Option
              key={item?.code}
              value={item?.code}>
              <Rate
                value={item?.code}
                color={"#030712"}
              />
            </Select.Option>
          )
        })}
    </Select>
  )
}