ef_front/app/components/CalenderSelector.tsx

import DayRange from "./svgs/dayRange";
import OneMonth from "./svgs/oneMonth";
import Realtime from "./svgs/realtime";
import Arrow from "./svgs/arrow";
import { DateRangeEnum } from "@/app/constants/dateRange";
import { useState,useEffect } from "react";

export default function CalenderSelector( {dateString, is_small, onRangeChange}: {dateString: string, is_ri: boolean, is_small: boolean, onRangeChange?: (start: Date, end: Date) => void} ) {  
  const [isOpen, setIsOpen] = useState(false);
  const [selected, setSelected] = useState<number>(DateRangeEnum.ONE_MONTH);
  const [rangeStart, setRangeStart] = useState<Date>(new Date());
  const [rangeEnd, setRangeEnd] = useState<Date>(new Date());

  useEffect(() => {
    const startDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
    const endDate = new Date(Date.now());
    setRangeStart(startDate);
    setRangeEnd(endDate);
    onRangeChange?.(startDate, endDate);
  }, []);

  return (
    <>
      <div className="relative inline-block">
        <div className={`
        ${is_small ? 'w-[267px] h-[28px]':'w-[267px] h-[36px]'} 
        ${isOpen ? 'border-[#F94B37] bg-[#FFF3F2] bor' : 'border-border-pale bg-white '} 
         border-1 rounded-lg flex flex-row items-center justify-between gap-2 px-2 cursor-pointer`}
        onClick={() => {
          console.log('click');
          setIsOpen(!isOpen);
        }}
        >
          <div className="flex-shrink-0">
            {selected === DateRangeEnum.DAY_RANGE && <DayRange color="#848484" width={is_small ? 16 : 20} height={is_small ? 16 : 20} />} 
            {selected === DateRangeEnum.ONE_MONTH&& <OneMonth color="#848484" width={is_small ? 16 : 20} height={is_small ? 16 : 20} />}
            {selected === DateRangeEnum.ALL&& <Realtime color="#848484" width={is_small ? 16 : 20} height={is_small ? 16 : 20} />}
          </div>
          <div className={`flex-1 min-w-0 font-semibold ${is_small ? 'text-xs':'text-sm'}`}>
            {selected === DateRangeEnum.DAY_RANGE && `${rangeStart.toISOString().split('T')[0]} ~ ${rangeEnd.toISOString().split('T')[0]}`}
            {selected === DateRangeEnum.ONE_MONTH&& '최근 1개월'}
            {selected === DateRangeEnum.ONE_WEEK&& '최근 1주일'}
            {selected === DateRangeEnum.TWO_MONTHS&& '최근 2개월'}
            {selected === DateRangeEnum.THREE_MONTHS&& '최근 3개월'}
            {selected === DateRangeEnum.SIX_MONTHS&& '최근 6개월'}
            {selected === DateRangeEnum.ONE_YEAR&& '최근 1년'}
            {selected === DateRangeEnum.ALL&& '전체'}
          </div>
          <div className={`pt-[3px] transition-transform ${isOpen ? 'rotate-180' : ''} flex-shrink-0`}>
            <Arrow color="#A4A0A0" width={is_small ? 12 : 18} height={is_small ? 8 : 12} />
          </div>

        </div>
        {isOpen && (
          <div className={`absolute left-0 top-full mt-1 ${is_small ? 'w-[267px]' : 'w-[267px]'} bg-white border-1 border-border-pale rounded-lg shadow-sm p-1 z-50`}>
            <div className="flex flex-col">
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.ALL ? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.ALL); 
                  const end = new Date();
                  const start = new Date(0);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <Realtime color={selected === DateRangeEnum.ALL ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">전체</span>
              </button>
                <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.ONE_WEEK? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.ONE_WEEK); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 7*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.ONE_WEEK ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 1주일</span>
              </button>
              <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.ONE_MONTH? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.ONE_MONTH); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 30*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.ONE_MONTH ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 1개월</span>
              </button>
              <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.TWO_MONTHS? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.TWO_MONTHS); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 60*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.TWO_MONTHS ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 2개월</span>
              </button>
              <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.THREE_MONTHS? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.THREE_MONTHS); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 90*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.THREE_MONTHS ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 3개월</span>
              </button>
              <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.SIX_MONTHS? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.SIX_MONTHS); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 182*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.SIX_MONTHS ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 6개월</span>
              </button>
              <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.ONE_YEAR? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.ONE_YEAR); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 365*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.ONE_YEAR ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 1년</span>
              </button>
              <div
                className={`flex items-center gap-1 px-2 pr-0 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.DAY_RANGE ? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  // setSelected(DateRangeEnum.DAY_RANGE); 
                  // setIsOpen(false); 
                }}
              >
                <DayRange color={selected === DateRangeEnum.DAY_RANGE ? '#F94B37' : '#848484'} width={16} height={16} />
                <input
                  type="text"
                  value={rangeStart.toISOString().split('T')[0]}
                  onChange={(e) => setRangeStart(new Date(e.target.value))}
                  className="border-1 border-border-pale rounded-md p-0.5 text-xs w-[84px] text-center"
                />
                <span className="mx-0">~</span>
                <input
                  type="text"
                  value={rangeEnd.toISOString().split('T')[0]}
                  onChange={(e) => setRangeEnd(new Date(e.target.value))}
                  className="border-1 border-border-pale rounded-md p-0.5 text-xs w-[84px] text-center"
                />

                <button className="text-xs text-[#848484] border-1 border-border-pale rounded-md p-0.5 px-1 hover:text-[#F94B37] hover:border-[#F94B37]"
                onClick={() => {
                  setSelected(DateRangeEnum.DAY_RANGE);
                  onRangeChange?.(rangeStart, rangeEnd);
                  setIsOpen(false);
                }}
                >
                  선택 
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
}