import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { Thumbnail } from 'app/shared/components/thumbnail/thumbnail';
import IconButton from 'app/shared/components/button/iconButton';
import Flag from 'app/shared/components/flag/flag';
import { ROUTER } from 'app/common/routes';
import { countries } from 'app/modules/account/store/settings.constants';
import { PermissionGuard } from 'app/common/containers/auth/guard.container';
import { AUTH } from 'app/common/store/auth/auth.constants';
import { selectUserData, selectUserDataCountry } from 'app/modules/user/store/user.selectors';
import { history } from 'app/common/store';
import * as Text from 'app/shared/components/text/text';
import { SubHeader } from 'app/shared/components/topBar/subHeader';
import ResetPasswordModal from '../components/resetPasswordModal';

export const SettingsThumbnail = ({ thumbnail }: { thumbnail: string }) => (
  <div className="u-margin-sm-left--small u-margin-sm-right--small u-margin-bottom--big u-margin-sm-bottom--none">
    <div className="o-layout o-layout--content-dependent">
      <Thumbnail size={'size-big'} src={thumbnail} />
      <PermissionGuard permission={AUTH.PERMISSION.ACCOUNT.AVATAR_EDIT}>
        <div className="u-position--absolute u-position--right u-position--bottom js-edit-avatar-hit-area">
          <IconButton onClick={() => history.push(ROUTER.generate('accountSettingsEditAvatarRoute'))}>
            <i className="icon-edit" />
          </IconButton>
        </div>
      </PermissionGuard>
    </div>
  </div>);


const AccountSettingsPage = () => {
  const [ isModalOpened, setIsModalOpened ] = useState(false);
  const countryCode = useSelector(selectUserDataCountry);
  const country = countries.find((country) => countryCode === country.code);
  const { name, company, email, phone, avatar } = useSelector(selectUserData);

  const companyNames = (company && company.length > 0) ? company.join(', ') : null;
  const thumbnail = avatar ?? '';

  return (
    <>
      <SubHeader
        headline="Account Settings"
      />
      <div className="o-main-column o-layout u-flex-wrap u-margin-top--big">
        <div className="o-layout o-layout__item-12 o-layout__item-sm-3">
          <SettingsThumbnail thumbnail={thumbnail} />
        </div>

        <div className="o-layout o-layout--vertical o-layout__item-12 o-layout__item-sm-4">
          <div className="u-margin-bottom--small">
            <Text.Label extraClass='u-margin--none'>Name</Text.Label>
          </div>
          <div className="u-margin-bottom--big">
            <Text.Paragraph size="small" extraClass='u-margin--none'>{name}</Text.Paragraph>
          </div>
          <div className="u-margin-bottom--small">
            <Text.Label extraClass='u-margin--none'>Company</Text.Label>
          </div>
          <div className="u-margin-bottom--big">
            <Text.Paragraph size="small" extraClass='u-margin--none'>
              {companyNames ?? 'No partner assigned'}
            </Text.Paragraph>
          </div>
          <div className="u-margin-bottom--small">
            <Text.Label extraClass='u-margin--none'>Email</Text.Label>
          </div>
          <div className="u-margin-bottom--big">
            <Text.Paragraph size="small" extraClass='u-margin--none'>{email}</Text.Paragraph>
          </div>
          <div className="u-margin-bottom--small">
            <Text.Label extraClass='u-margin--none'>Password</Text.Label>
          </div>
          <div className="u-margin-bottom--big">
            <Text.Paragraph size="small" extraClass='u-margin--none'>
              <p onClick={() => setIsModalOpened(true)} className="u-cursor--pointer u-font--clear-spacings">********
                <i className="icon-edit u-margin-left--small" />
              </p>
            </Text.Paragraph>
          </div>
          <ResetPasswordModal isOpened={isModalOpened} onOverlay={() => setIsModalOpened(false)} />
        </div>

        <div className="o-layout o-layout--vertical o-layout__item-12 o-layout__item-sm-4">
          <div className="u-margin-bottom--small">
            <Text.Label extraClass='u-margin--none'>Phone</Text.Label>
          </div>
          <div className="u-margin-bottom--big">
            <Text.Paragraph size="small" extraClass='u-margin--none'>{phone}</Text.Paragraph>
          </div>
          <div className="u-margin-bottom--small">
            <Text.Label extraClass='u-margin--none'>Country</Text.Label>
          </div>
          <div className="u-margin-bottom--big">
            <Text.Paragraph size="small" extraClass='u-margin--none'>
              {countryCode && <Flag countryCode={countryCode} />}{country?.name}
            </Text.Paragraph>
          </div>
        </div>

        <div className='o-layout o-layout__item o-layout__item-12 o-layout__item-sm-11 o-gutter-sm-right--big u-margin-top--small u-margin-sm-top--big u-flex-column u-align-items-stretch u-align-items-sm-end'>
          <PermissionGuard permission={AUTH.PERMISSION.ACCOUNT.DETAILS_EDIT}>
            <Link
              className="c-button c-button--big c-button--border u-align--center u-font-size--caption"
              to={ROUTER.generate('accountSettingsEditRoute')}>
              Edit details
            </Link>
          </PermissionGuard>
        </div>

      </div>
    </>
  );
};

export default AccountSettingsPage;