import React, { useMemo } from 'react';
import classNames from 'classnames/bind';
import moment from 'moment';

import 'moment/locale/fr';
import 'moment/locale/nl';

import { StoreState } from 'store/rootReducer';
import config from 'config/general';
import { useSelector } from 'react-redux';

const styles = classNames.bind();

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  date: string;
  readFormat: string;
  format: string;
  lg: string;
  specialClass: string;
  className: string;
  style: {};
}

export type DateItemProps = StateProps & DispatchProps & OwnProps;

interface DateItemState {}

const DateItem = (props: DateItemProps) => {
  const { date, readFormat, format, timezone, style, className, specialClass } = props;

  const lg = useSelector((state: StoreState) => state.content.lg);

  const value = useMemo(() => {
    if (!date) return null;

    if (timezone) {
      const localDate = moment(date).locale(lg || config.defaultLanguage);
      return localDate.tz(timezone).format(format || 'DD/MM/YYYY');
    }

    return moment(date, readFormat)
      .locale(lg || config.defaultLanguage)
      .format(format || 'DD/MM/YYYY');
  }, [date, timezone, format, lg]);

  return (
    <span style={style} className={styles('DateItem', className, specialClass)}>
      {value}
    </span>
  );
};

export default DateItem;
