import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import AccountStructure from 'components/structure/AccountStructure';
import DateItem from 'components/items/DateItem';
import { pushRoute } from 'store/utils/routes';
import styleIdentifiers from './personalInfo.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type PersonalInfoProps = StateProps & DispatchProps & OwnProps;

const PersonalInfo = (props: PersonalInfoProps) => {
  const { history } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const profile = useSelector(
    (state: StoreState) => state.account.profile && state.account.profile.data,
  );
  // Allow to dispatch actions
  const dispatch = useDispatch();

  console.log('profile', profile);

  return (
    <AccountStructure
      title="pages.account.personalInfo"
      rightLabel="pages.account.actions.edit"
      rightColor="primary"
      rightAction={() => history.push(pushRoute('editPersonalInfo', lg))}
      className={styles('personal-info')}
    >
      {profile && (
        <>
          <div className={styles('item')}>
            <TextItem path="forms.profile.firstName.firstName" className={styles('label')} />
            {profile.firstName}
          </div>
          <div className={styles('item')}>
            <TextItem path="forms.profile.lastName.lastName" className={styles('label')} />
            {profile.lastName}
          </div>
          <div className={styles('item')}>
            <TextItem path="forms.address.street.street" className={styles('label')} />
            {profile.address && profile.address.street}
          </div>
          <div className={styles('inline')}>
            <div className={styles('item')}>
              <TextItem path="forms.address.number.number" className={styles('label')} />
              {profile.address && profile.address.number}
            </div>

            {profile.address?.box && (
              <div className={styles('item')}>
                <TextItem path="forms.address.box.box" className={styles('label')} />
                {profile.address && profile.address.box}
              </div>
            )}
          </div>
          <div className={styles('item')}>
            <TextItem path="forms.address.city.city" className={styles('label')} />
            {profile.address && profile.address.city}
          </div>
          <div className={styles('item')}>
            <TextItem path="forms.address.zip.zip" className={styles('label')} />
            {profile.address && profile.address.zip}
          </div>
          <div className={styles('item')}>
            <TextItem path="forms.address.country.country" className={styles('label')} />
            {profile.address && profile.address.country}
          </div>
          <div className={styles('item')}>
            <TextItem path="forms.profile.phoneNumber.phoneNumber" className={styles('label')} />
            {profile.phoneNumber}
          </div>
          {profile?.birthDate && (
            <div className={styles('item')}>
              <TextItem path="forms.profile.birthday.birthday" className={styles('label')} />
              <DateItem date={profile.birthDate} />
            </div>
          )}
          <div className={styles('item')}>
            <TextItem path="forms.profile.gender.gender" className={styles('label')} />
            <TextItem item={profile.gender} path="forms.profile.gender.list" />
          </div>
        </>
      )}
    </AccountStructure>
  );
};

export default PersonalInfo;
