import React, { FC, ReactNode, ReactType, Fragment } from 'react';
import Layout from '../../components/Layout';
import Content from '../../components/Content';
import Button from '../../blocks/Button';

import css from './index.module.css';
import { AccountInformationProps } from '../../components/AccountInformation';
import { ServiceCallsInformationProps } from '../../components/ServiceCallsInformation';
import { MilaGridColumn, MilaGridVoid } from '../../index';

export interface AccountPageProps {
  title: string;
  children?: ReactNode;
  logoutLabel: string;
  personalInformationLabel: string;
  serviceCallsLabel: string;
  logout: () => void;
  AccountInformation?: ReactType;
  AccountInformationProps?: AccountInformationProps;
  ServiceCallsInformation?: ReactType;
  ServiceCallsInformationProps?: ServiceCallsInformationProps;
}

const AccountPage: FC<AccountPageProps> = ({
  title,
  logoutLabel,
  personalInformationLabel,
  logout,
  children,
  AccountInformation,
  AccountInformationProps = {},
  ServiceCallsInformation,
  ServiceCallsInformationProps = {},
  serviceCallsLabel,
}) => (
  <Layout>
    {title && (
      <Content noPaddingBottom>
        <MilaGridVoid>
          <MilaGridColumn
            columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
            offset={['lg-1', 'xl-2', 'xxl-3']}
          >
            <div className={css.accountPage__title}>
              <h1>{title}</h1>
              <div>
                <Button handleClick={logout}>{logoutLabel}</Button>
              </div>
            </div>
          </MilaGridColumn>
        </MilaGridVoid>
      </Content>
    )}

    <Content>
      <MilaGridVoid>
        <MilaGridColumn columns={['sm-12', 'md-10']} offset={['md-1']}>
          <div className={css.accountPage__information}>
            {AccountInformation && (
              <div className={css.accountPage__accountInformation}>
                <h3 className={css.accountPage__informationTitle}>
                  {personalInformationLabel}
                </h3>

                <AccountInformation {...AccountInformationProps} />
              </div>
            )}

            {ServiceCallsInformation && (
              <div className={css.accountPage__serviceCallsInformation}>
                <Fragment>
                  <h3 className={css.accountPage__informationTitle}>
                    {serviceCallsLabel}
                  </h3>
                  <ServiceCallsInformation {...ServiceCallsInformationProps} />
                </Fragment>
              </div>
            )}
          </div>

          {children}
        </MilaGridColumn>
      </MilaGridVoid>
    </Content>
  </Layout>
);

export default AccountPage;