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

interface FilterCalendarProps {
  title?: string;
  startDate: string;
  endDate: string;
  setStartDate: (startDate: string) => void;
  setEndDate: (endDate: string) => void;
};

export const FilterCalendar = ({
  title,
  startDate,
  endDate,
  setStartDate,
  setEndDate
}: FilterCalendarProps) => {
  const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간');
  const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false);
  const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
  const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);
  
  const setFilterDate = (dateOptions: FilterDateOptions) => {
    if(dateOptions === FilterDateOptions.Today){
      setStartDate(moment().format('YYYY.MM.DD'));
      setEndDate(moment().format('YYYY.MM.DD'));
      setDateReadyOnly(true);
      setFilterDateOptionsBtn(FilterDateOptions.Today);
    } 
    else if(dateOptions === FilterDateOptions.Week){
      setStartDate(moment().subtract(1, 'week').format('YYYY.MM.DD'));
      setEndDate(moment().format('YYYY.MM.DD'));
      setDateReadyOnly(true);
      setFilterDateOptionsBtn(FilterDateOptions.Week);
    }
    else if(dateOptions === FilterDateOptions.Month){
      setStartDate(moment().subtract(1, 'month').format('YYYY.MM.DD'));
      setEndDate(moment().format('YYYY.MM.DD'));
      setDateReadyOnly(true);
      setFilterDateOptionsBtn(FilterDateOptions.Month);
    }
    else if(dateOptions === FilterDateOptions.Input){
      setDateReadyOnly(false);
      setFilterDateOptionsBtn(FilterDateOptions.Input);
    }
    
  };

  const onClickToOpenCalendar = (calendarType: CalendarType) => {
    if(!dateReadOnly){
      setCalendarOpen(true);
      setCalendarType(calendarType);
    }
    else{
      setCalendarOpen(false);
      
    }
  };

  const setNewDate = (date: string) => {
    if(calendarType === CalendarType.Start){
      setStartDate(date);
    }
    else if(calendarType === CalendarType.End){
      setEndDate(date);
    }
    setCalendarOpen(false);
  }

  useEffect(() => {
    
  }, []);
  return (
    <>
      <div className="opt-field">
        <div className="opt-label">{ filterTitle }</div>
        <div className="opt-controls col below h36">
          <div className="chip-row">
            <span 
              className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Today)? 'active': ''}` }
              onClick={ () => setFilterDate(FilterDateOptions.Today) }
            >당일</span>
            <span 
              className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Week)? 'active': ''}` }
              onClick={ () => setFilterDate(FilterDateOptions.Week) }
            >일주일</span>
            <span 
              className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Month)? 'active': ''}` }
              onClick={ () => setFilterDate(FilterDateOptions.Month) }
            >1개월</span>
            <span 
              className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Input)? 'active': ''}` }
              onClick={ () => setFilterDate(FilterDateOptions.Input) }
            >직접입력</span>
          </div>
          <div className="range-row">
            <div className="input-wrapper date">
              <input
                id="startDate"
                className="date-input"
                type="text"
                placeholder="날짜 선택"
                value={ startDate }
                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                readOnly={ dateReadOnly }
              />
              <button
                type="button"
                className="date-btn"
                onClick={ () => onClickToOpenCalendar(CalendarType.Start) }
              >
                <img
                  src={ IMAGE_ROOT + '/ico_date.svg' }
                  alt="날짜 선택"
                />
              </button>
            </div>
            <span className="beetween">~</span>
            <div className="input-wrapper date">
              <input
                id="endDate"
                className="date-input"
                type="text"
                placeholder="날짜 선택"
                value={ endDate }
                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                readOnly={ dateReadOnly }
              />
              <button 
                type="button" 
                className="date-btn"
                onClick={ () => onClickToOpenCalendar(CalendarType.End) }
              >
                <img
                  src={ IMAGE_ROOT + '/ico_date.svg' }
                  alt="날짜 선택"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
      <NiceCalendar
        calendarOpen={ calendarOpen }
        setCalendarOpen={ setCalendarOpen }
        startDate={ startDate }
        endDate={ endDate }
        calendarType={ calendarType }
        setNewDate={ setNewDate }
      ></NiceCalendar>
    </>
  );
};