import { useState } from 'react';
import { CalendarType } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import NiceCalendar from '../calendar/nice-calendar';

interface SingleDatePickerProps {
  title?: string;
  date: string;
  setDate: (date: string) => void;
  placeholder?: string;
  minDate?: Date;
  maxDate?: Date;
}

export const SingleDatePicker = ({
  title,
  date,
  setDate,
  placeholder = '날짜 선택',
  minDate,
  maxDate
}: SingleDatePickerProps) => {
  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);

  const onClickToOpenCalendar = () => {
    setCalendarOpen(true);
  };

  const setNewDate = (newDate: string) => {
    setDate(newDate);
    setCalendarOpen(false);
  };

  return (
    <>
      {title && (
        <div className="issue-row gap-10">
          <div 
            className="issue-label"
            style={{ fontSize: 'var(--fs-14)' }}
          >{ title }</div>
          <div className="issue-field">
            <div className="input-wrapper date">
              <input
                type="text"
                value={date}
                className="date-input"
                placeholder={placeholder}
                readOnly
              />
              <button
                type="button"
                className="date-btn"
                onClick={onClickToOpenCalendar}
              >
                <img
                  src={IMAGE_ROOT + '/ico_date.svg'}
                  alt="날짜 선택"
                />
              </button>
            </div>
          </div>
        </div>
      )}

      {!title && (
        <div className="input-wrapper date">
          <input
            type="text"
            value={date}
            className="date-input"
            placeholder={placeholder}
            
          />
          <button
            type="button"
            className="date-btn"
            onClick={onClickToOpenCalendar}
          >
            <img
              src={IMAGE_ROOT + '/ico_date.svg'}
              alt="날짜 선택"
            />
          </button>
        </div>
      )}

      <NiceCalendar
        calendarOpen={calendarOpen}
        setCalendarOpen={setCalendarOpen}
        singleDate={date}
        calendarType={CalendarType.Single}
        setNewDate={setNewDate}
        minDate={minDate}
        maxDate={maxDate}
      ></NiceCalendar>
    </>
  );
};