import React, { ForwardedRef } from "react";
import { IconCom } from "@icons/index";
import { Calandar } from "@icons/Calandar";

export interface CustomDpInputProps {
  refObj: ForwardedRef<HTMLDivElement>;
  value: string;
  onClick: any;
}
export const CustomDpInput: React.FC<CustomDpInputProps> = props => {
  const { refObj, value, onClick } = props;
  const [startStrDate, endStrDate] = value.split(" - ");
  const start_end = startStrDate && endStrDate;
  return (
    <div className="flex items-center text-[12px]" ref={refObj}>
      <input
        onClick={onClick}
        className="text-blue text-[12px] font-medium w-[76px] outline-none bg-transparent"
        type="text"
        value={startStrDate}
        placeholder={start_end ? "" : "YYYY-MM-DD"}
        readOnly
      />
      <span className="mx-[6px] text-black">至</span>
      <input
        onClick={onClick}
        className="text-blue text-[12px] font-medium w-[76px] outline-none bg-transparent"
        type="text"
        value={endStrDate}
        placeholder={start_end ? "" : "YYYY-MM-DD"}
        readOnly
      />
      <span className="ml-[10px]" onClick={onClick}>
        <IconCom>
          <Calandar />
        </IconCom>
      </span>
      {/*<span*/}
      {/*  className='w-[24px] h-[24px] ml-[10px] inline-block flex items-center justify-center cursor-pointer hover:bg-derive-10 rounded-[4px]'*/}
      {/*  onClick={onClick}*/}
      {/*>*/}
      {/*  <IconCom><Filter /></IconCom>*/}
      {/*</span>*/}
    </div>
  );
};