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';
import { useTranslation } from 'react-i18next';

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 { t } = useTranslation();
  const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period'));
  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 [newStartDate, setNewStartDate] = useState<string>('');
  const [newEndDate, setNewEndDate] = useState<string>('');

  const setFilterDate = (dateOptions: FilterDateOptions) => {
    if(dateOptions === FilterDateOptions.Today){
      setStartDate(moment().format('YYYYMMDD'));
      setNewStartDate(moment().format('YYYY.MM.DD'));
      setEndDate(moment().format('YYYYMMDD'));
      setNewEndDate(moment().format('YYYY.MM.DD'));
      setDateReadyOnly(true);
      setFilterDateOptionsBtn(FilterDateOptions.Today);
    } 
    else if(dateOptions === FilterDateOptions.Week){
      setStartDate(moment().subtract(1, 'week').format('YYYYMMDD'));
      setNewStartDate(moment().subtract(1, 'week').format('YYYY.MM.DD'));
      setEndDate(moment().format('YYYYMMDD'));
      setNewEndDate(moment().format('YYYY.MM.DD'));
      setDateReadyOnly(true);
      setFilterDateOptionsBtn(FilterDateOptions.Week);
    }
    else if(dateOptions === FilterDateOptions.Month){
      setStartDate(moment().subtract(1, 'month').format('YYYYMMDD'));
      setNewStartDate(moment().subtract(1, 'month').format('YYYY.MM.DD'));
      setEndDate(moment().format('YYYYMMDD'));
      setNewEndDate(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(moment(date, 'YYYY.MM.DD').format('YYYYMMDD'));
      setNewStartDate(moment(date, 'YYYY.MM.DD').format('YYYY.MM.DD'));
    }
    else if(calendarType === CalendarType.End){
      setEndDate(moment(date, 'YYYY.MM.DD').format('YYYYMMDD'));
      setNewEndDate(moment(date, 'YYYY.MM.DD').format('YYYY.MM.DD'));
    }
    setCalendarOpen(false);
  }

  useEffect(() => {
    if(startDate && startDate.length === 8){
      let str = startDate.substring(0, 4)+'.'+startDate.substring(4, 6)+'.'+startDate.substring(6, 8);
      setNewStartDate(str);
    }
    else{
      setNewStartDate(startDate);
    }
    if(endDate && endDate.length === 8){
      let str = endDate.substring(0, 4)+'.'+endDate.substring(4, 6)+'.'+endDate.substring(6, 8);
      setNewEndDate(str);
    }
    else{
      setNewEndDate(endDate);
    }
  }, []);
  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 ${(filterDateOptionsBtn === FilterDateOptions.Today)? 'active': ''}` }
              onClick={ () => setFilterDate(FilterDateOptions.Today) }
              style={{ fontSize: 'var(--fs-13)' }}
            >{t('filter.periods.today')}</span>
            <span
              className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Week)? 'active': ''}` }
              style={{ fontSize: 'var(--fs-13)' }}
              onClick={ () => setFilterDate(FilterDateOptions.Week) }
            >{t('filter.periods.week')}</span>
            <span
              className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Month)? 'active': ''}` }
              onClick={ () => setFilterDate(FilterDateOptions.Month) }
              style={{ fontSize: 'var(--fs-13)' }}
            >{t('filter.periods.1month')}</span>
            <span
              className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Input)? 'active': ''}` }
              onClick={ () => setFilterDate(FilterDateOptions.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={ newStartDate }
                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                readOnly={ dateReadOnly }
              />
              <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={ newEndDate }
                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                readOnly={ dateReadOnly }
              />
              <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>
      <NiceCalendar
        calendarOpen={ calendarOpen }
        setCalendarOpen={ setCalendarOpen }
        startDate={ newStartDate }
        endDate={ newEndDate }
        calendarType={ calendarType }
        setNewDate={ setNewDate }
      ></NiceCalendar>
    </>
  );
};