/**** Libraries ****/
import React, { useEffect } from 'react';
import SkeletonThemeWrapper from '../../../customization-cornor/skeletonCustomization'; // import PropTypes from 'prop-types';
// /**** Components ****/
// import { Container, Box } from '../../layout';
// /**** CSS ****/
// import style from './YearView-Style.css';

/**** Methods ****/

/*import Year from '../year/Year-Behaviour';
import Month from '../month/Month-Behaviour';
import { CustomizeSkeleton } from '../../../customization-cornor';
import YearViewImplementation from './Yearview.skeleton';

export function getYearDetails(yearLength) {
  const dateObj = new Date();
  const year = dateObj.getFullYear();

  if (yearLength === 2) {
    return {
      startPoint: 0,
      endPoint: 49,
      currentYear: year
    };
  }

  return {
    startPoint: 2000,
    endPoint: 2050,
    currentYear: year
  };
}

const monthNamesData = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec'
];

function getYears() {
  const years = [];
  const { startPoint, endPoint } = getYearDetails();

  for (let i = startPoint; i <= endPoint; i++) {
    years.push(i);
  }

  return years;
}

export default class YearView extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleMonthClick = this.handleMonthClick.bind(this);
    this.handleYearClick = this.handleYearClick.bind(this);
    this.getPublicMethods = this.getPublicMethods.bind(this);
    this.handleScrollToYear = this.handleScrollToYear.bind(this);
    this.handleUpdateLocalYear = this.handleUpdateLocalYear.bind(this);

    this.years = getYears();

    this.state = { localYear: '' };
  }

  componentDidMount() {
    //this.handleScrollToYear(this.props);
    this.handleUpdateLocalYear(this.props);
  }

  componentDidUpdate(prevProps) {
    let { viewedYear } = this.props;
    viewedYear = parseInt(viewedYear) || 0;

    let { viewedYear: oldViewedYear } = prevProps;
    oldViewedYear = parseInt(oldViewedYear) || 0;

    if (viewedYear !== oldViewedYear) {
      //this.handleScrollToYear(this.props);
      this.handleUpdateLocalYear(this.props);
    }
  }

  handleUpdateLocalYear(props) {
    let { viewedYear } = props;
    viewedYear = parseInt(viewedYear) || 0;
    setTimeout(() => {
      this.setState({ localYear: viewedYear });
    }, 150);
  }

  handleScrollToYear(props) {
    const { years = [], scrollToIndex } = this;
    let { viewedYear } = props;
    viewedYear = parseInt(viewedYear) || 0;
    const yearIndex = years.indexOf(viewedYear);
    yearIndex >= 0 &&
      scrollToIndex &&
      scrollToIndex(yearIndex, 0, { duration: 0 });
  }

  getPublicMethods(methods) {
    const { scrollToIndex } = methods;
    this.scrollToIndex = scrollToIndex;
  }

  handleMonthClick(month) {
    const { onSelectMonth } = this.props;
    onSelectMonth && onSelectMonth(month);
  }

  handleYearClick(year) {
    const { onSelectYear } = this.props;
    onSelectYear && onSelectYear(year);
  }


  render() {
    const { years = [] } = this;
    let {renderComponent}=this.props
    let renderProps={
      getPublicMethod:this.getPublicMethods,
      handleYearClick:(e,year)=>this.handleYearClick(year),
      handleMonthClick:(e,month)=>this.handleMonthClick(month),
      localYear:this.state.localYear,
      monthNamesData,
      handleScroll:(e)=>this.handleScrollToYear(e),
      years
    }
    return (
      CustomizeSkeleton(this.props,renderProps,renderComponent)
    );
  }
}

YearView.propTypes = {
  dataId: PropTypes.string,
  needBorder: PropTypes.bool,
  onSelectMonth: PropTypes.func,
  onSelectYear: PropTypes.func,
  viewedYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};

YearView.defaultProps = {
  dataId: 'dateContainer',
  needBorder: true
};
YearView.docs={
  componentGroup:'DateTime',
  folderName:'DateWidget'
}*/
// import React from "react";
// import SkeletonThemeWrapper from "../../../customization-cornor/skeletonCustomization"; 
// export default (props)=>{
//     let { onSelect}=props
//     let renderProps = {
//         handleSelect:e=>onSelect(e)
//     };
//     let { renderComponent, ...basicProps} = props;
//     console.log(props,'prop');
//     return <SkeletonThemeWrapper basicProps={basicProps} renderProps={renderProps} component={renderComponent} />;
// }

export function handleMonthClick(year, onSelectMonth) {
  onSelectMonth && onSelectMonth(year);
}
export function handleYearClick(year, onSelectYear) {
  onSelectYear && onSelectYear(year);
}
export function handleUpdateLocalYear(viewedYear, updateLocalYear) {
  viewedYear = parseInt(viewedYear) || 0;
  setTimeout(() => {
    updateLocalYear({
      localYear: viewedYear
    });
  }, 150);
}
export function getYearDetails(yearLength) {
  const dateObj = new Date();
  const year = dateObj.getFullYear();

  if (yearLength === 2) {
    return {
      startPoint: 0,
      endPoint: 49,
      currentYear: year
    };
  }

  return {
    startPoint: 2000,
    endPoint: 2050,
    currentYear: year
  };
}
const monthNamesData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

function getYears() {
  const years = [];
  const {
    startPoint,
    endPoint
  } = getYearDetails();

  for (let i = startPoint; i <= endPoint; i++) {
    years.push(i);
  }

  console.log(years, 'year');
  return years;
}

export default (props => {
  let {
    onSelectMonth,
    onSelectYear,
    viewedYear
  } = props;
  let [localYear, updateLocalYear] = React.useState(0);
  useEffect(() => {
    viewedYear = parseInt(viewedYear); //let { viewedYear: oldViewedYear } = prevProps;

    let oldViewedYear = localYear;
    oldViewedYear = parseInt(oldViewedYear) || 0;

    if (viewedYear !== oldViewedYear) {
      handleUpdateLocalYear(viewedYear, updateLocalYear);
    }
  }, []);
  let yearsval = getYears();
  let renderProps = {
    handleYearClick: (e, year) => handleYearClick(year, onSelectYear),
    handleMonthClick: (e, month) => handleMonthClick(month, onSelectMonth),
    localYear,
    monthNamesData,
    years: yearsval
  };
  let {
    renderComponent,
    ...basicProps
  } = props;
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
});