import React, { useState, useEffect } from 'react';
import moment from 'moment';
import { AtomSelect } from 'native/atoms/Select';
import { DateContainer, DateItemContainer } from './styles';
import { CSSObject } from "styled-components";

export interface IInputDateProps {
  date?: string;
  minYear?: string;
  maxYear?: string;
  width?: string;
  disabled?: boolean;
  required?: boolean;
  readOnly?: boolean;
  styles?: CSSObject;
  onChange?: (value: any) => void;
}

const createListDay = (year: string, month: string, date: string) => {
  const _year = !isNaN(Number(year)) ? year : moment(date).format('YYYY');
  const _month = !isNaN(Number(month)) ? month : date? moment(date).format('MM') : '01';
  const days = moment(`${_year}-${_month}`, "YYYY-MM").daysInMonth();
  
  let list: Array<string> = [];
  for (let index = 1; index <= days; index++) {
    if(index < 10){
      list.push("0"+index.toString());
    }
    else{
    list.push(index.toString());

    }
  }
  return list;
};

const createListYear = (minYear: string, maxYear: string) => {
  let list: Array<string> = [];
  for (let index = (parseInt(minYear)); index <= parseInt(maxYear); index++) {
    list.push(index.toString());
  }
  const labelYearList = list.map((year) => year).reverse();
  return labelYearList;
};

const createListMonth = () => {
  let list: Array<string> = [];
  for (let index = 1; index <= 12; index++) {
    const item = index < 10 ? `0${index}` : (index).toString();
    list.push(item);
  }
  return list;
};



export const AtomInputDate = ({
  date = '',
  width,
  disabled = false,
  required = false,
  readOnly = false,
  minYear = moment().subtract(100, 'y').format('YYYY'), 
  maxYear = moment().add(100, 'y').format('YYYY'),
  styles,
  onChange = () => { },
  }: IInputDateProps) => {
  const [year, setYear] = useState<string>('YYYY');
  const [month, setMonth] = useState<string>('MM');
  const [day, setDay] = useState<string>('DD');
  const [newDate, setNewDate] = useState<string>(date)

  const monthList = createListMonth();
  const dayList = createListDay(year, month, date);
  const yearList = createListYear(minYear, maxYear);

  useEffect(() => {
    if (!isNaN(Number(year)) && !isNaN(Number(month)) && !isNaN(Number(day))) {
      const newDate = moment(`${year}${month}${day}`, 'YYYYMMDD').format('MM-DD-YYYY');
      setNewDate(newDate);
      onChange(newDate)
    }
  }, [year, month, day]);


  useEffect(() => {
    let currDate = moment(date, 'MM-DD-YYYY');
    let month = currDate.format('MM');
    let day = currDate.format('DD');
    let year = currDate.format('YYYY');

    if (
      monthList.includes(month.toString()) &&
      yearList.includes(year.toString()) &&
      dayList.includes(day.toString())
    ) {
      setMonth(month);
      setYear(year);
      setDay(day);
    }
  }, [date]);
  
  return (
    <DateContainer width={width}>
      <DateItemContainer >
        <AtomSelect
          items={monthList}
          value={month}
          onChangeValue={(month: string) => setMonth(month)}
          width={'100%'}
          disabled={disabled}
          required={required}
          readOnly={readOnly}
          testID='testMonth'
          styles={styles}
        />
      </DateItemContainer>
      <DateItemContainer>
        <AtomSelect
          items={dayList}
          value={day}
          onChangeValue={(day: string) => setDay(day)}
          width={'100%'}
          disabled={disabled}
          required={required}
          readOnly={readOnly}
          testID='testDay'
          styles={styles}
        />
      </DateItemContainer>
      <DateItemContainer>
        <AtomSelect
          items={yearList}
          value={year}
          onChangeValue={(year: string) => setYear(year)}
          width={'100%'}
          disabled={disabled}
          required={required}
          readOnly={readOnly}
          testID='testYear'
          styles={styles}
        />
      </DateItemContainer>
    </DateContainer>
  );
}
