import moment from 'moment';
import { ChangeEvent, useState } from 'react';
import { CalendarType, FilterMonthOptions } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import NiceCalendarMonth from '../calendar/nice-calendar-month';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';

interface FilterCalendarMonthProps {
  title?: string;
  startMonth: string;
  endMonth: string;
  setStartMonth: (startMonth: string) => void;
  setEndMonth: (endMonth: string) => void;
};

export const FilterCalendarMonth = ({
  title,
  startMonth,
  endMonth,
  setStartMonth,
  setEndMonth
}: FilterCalendarMonthProps) => {
  const { t } = useTranslation();
  const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period'));
  const [monthReadOnly, setMonthReadyOnly] = useState<boolean>(false);
  const [filterMonthOptionsBtn, setFilterMonthOptionsBtn] = useState<FilterMonthOptions>(FilterMonthOptions.Input);
  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
  const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);
  
  const setFilterMonth = (monthOptions: FilterMonthOptions) => {
    if(monthOptions === FilterMonthOptions.Month1){
      setStartMonth(moment().format('YYYYMM'));
      setEndMonth(moment().format('YYYYMM'));
      setMonthReadyOnly(true);
      setFilterMonthOptionsBtn(FilterMonthOptions.Month1);
    } 
    else if(monthOptions === FilterMonthOptions.Month2){
      setStartMonth(moment().subtract(1, 'month').format('YYYYMM'));
      setEndMonth(moment().format('YYYYMM'));
      setMonthReadyOnly(true);
      setFilterMonthOptionsBtn(FilterMonthOptions.Month2);
    }
    else if(monthOptions === FilterMonthOptions.Month3){
      setStartMonth(moment().subtract(2, 'month').format('YYYYMM'));
      setEndMonth(moment().format('YYYYMM'));
      setMonthReadyOnly(true);
      setFilterMonthOptionsBtn(FilterMonthOptions.Month3);
    }
    else if(monthOptions === FilterMonthOptions.Input){
      setMonthReadyOnly(false);
      setFilterMonthOptionsBtn(FilterMonthOptions.Input);
    }
    
  };

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

  const setNewMonth = (month: string) => {
    console.log(month)
    if(calendarType === CalendarType.Start){
      setStartMonth(moment(month+'.01').format('YYYYMM'));
    }
    else if(calendarType === CalendarType.End){
      setEndMonth(moment(month+'.01').format('YYYYMM'));
    }
    setCalendarOpen(false);
  }

  useEffect(() => {
    
  }, []);
  return (
    <>
      <div className="opt-field">
        <div 
          className="opt-label"
          style={{ fontSize: 'var(--fs-14)' }}
        >{ filterTitle }</div>
        <div className="opt-controls col below h36">
          <div className="chip-row">
            <span
              className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month1)? 'active': ''}` }
              onClick={ () => setFilterMonth(FilterMonthOptions.Month1) }
              style={{ fontSize: 'var(--fs-13)' }}
            >{t('filter.periods.currentMonth')}</span>
            <span
              className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month2)? 'active': ''}` }
              onClick={ () => setFilterMonth(FilterMonthOptions.Month2) }
              style={{ fontSize: 'var(--fs-13)' }}
            >{t('filter.periods.2months')}</span>
            <span
              className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month3)? 'active': ''}` }
              onClick={ () => setFilterMonth(FilterMonthOptions.Month3) }
              style={{ fontSize: 'var(--fs-13)' }}
            >{t('filter.periods.3months')}</span>
            <span
              className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Input)? 'active': ''}` }
              onClick={ () => setFilterMonth(FilterMonthOptions.Input) }
              style={{ fontSize: 'var(--fs-13)' }}
            >{t('filter.periods.custom')}</span>
          </div>
          <div className="range-row">
            <div className="input-wrapper date">
              <input
                id="startDate"
                className="date-input"
                type="text"
                placeholder={t('filter.selectDate')}
                value={ moment(startMonth).format('YYYY.MM') }
                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                readOnly={ monthReadOnly }
              />
              <button
                type="button"
                className="date-btn"
                onClick={ () => onClickToOpenCalendar(CalendarType.Start) }
              >
                <img
                  src={ IMAGE_ROOT + '/ico_date.svg' }
                  alt={t('filter.selectDate')}
                />
              </button>
            </div>
            <span className="beetween">~</span>
            <div className="input-wrapper date">
              <input
                id="endDate"
                className="date-input"
                type="text"
                placeholder={t('filter.selectDate')}
                value={ moment(endMonth).format('YYYY.MM') }
                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                readOnly={ monthReadOnly }
              />
              <button
                type="button"
                className="date-btn"
                onClick={ () => onClickToOpenCalendar(CalendarType.End) }
              >
                <img
                  src={ IMAGE_ROOT + '/ico_date.svg' }
                  alt={t('filter.selectDate')}
                />
              </button>
            </div>
          </div>
        </div>
      </div>
      <NiceCalendarMonth
        calendarOpen={ calendarOpen }
        setCalendarOpen={ setCalendarOpen }
        startMonth={ startMonth }
        endMonth={ endMonth }
        calendarType={ calendarType }
        setNewMonth={ setNewMonth }
      ></NiceCalendarMonth>
    </>
  );
};