import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ROUTER } from 'app/common/routes';
import Dropdown from 'app/shared/components/dropdown/dropdown';
import Flag from 'app/shared/components/flag/flag';
import { userDataUpdate } from 'app/modules/user/store';
import { countries } from 'app/modules/account/store/settings.constants';
import { selectUserData, selectUserUpdating } from 'app/modules/user/store/user.selectors';
import { SubHeader } from 'app/shared/components/topBar/subHeader';
import { Link } from 'react-router-dom';
import { SettingsThumbnail } from './settings.page';
import * as Text from 'app/shared/components/text/text';
import LockedText from 'app/shared/components/lockedText/lockedText';
import Input from 'app/shared/components/input/input';
import ResetPasswordModal from '../components/resetPasswordModal';

export const AccountSettingsEditPage = () => {
  const dispatch = useDispatch();

  const { name, company, phone, avatar, email, country } = useSelector(selectUserData);
  const userCountry = countries.find((countryItem) => country === countryItem.code);

  const [ newName, setNewName ] = useState(name);
  const [ newPhone, setNewPhone ] = useState(phone);
  const [ newCountryId, setNewCountryId ] = useState(userCountry?.value ?? null);
  const [ isModalOpened, setIsModalOpened ] = useState(false);

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

  const isSubmitDisabled = useSelector(selectUserUpdating);

  const handleSubmit = (event) => {
    event.preventDefault();
    const data = {
      name: newName,
      phone: newPhone,
      country: newCountryId ? countries.find((country) => newCountryId === country.value)?.code : null,
    };
    dispatch(userDataUpdate(data));
  };

  const handleInputChange = (handler, event) => {
    const target = event.target;
    const value = target.value;
    handler(value);
  };

  const createCountryLabel = (country) => {
    return <p className="u-margin--none"><Flag countryCode={country.code} />{country.name}</p>;
  };

  const handleCountryChange = (value) => {
    setNewCountryId(value);
  };

  return (
    <>
      <SubHeader
        headline="Account Settings"
      />
      <form onSubmit={(e) => handleSubmit(e)}>
        <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 o-gutter-sm-right--big">
            <div className="u-margin-bottom--small">
              <Text.Label extraClass='u-margin--none'>Name</Text.Label>
            </div>
            <div className="u-margin-bottom--big">
              <Input
                filled
                extraClass='u-margin--none'
                value={newName}
                onChange={(e) => handleInputChange(setNewName, e)}
                name='name' />
            </div>
            <div className="u-margin-bottom--small">
              <Text.Label extraClass='u-margin--none'>Company</Text.Label>
            </div>
            <div className='u-margin-bottom--big u-margin-sm-bottom--enormous'>
              <LockedText
                extraClass='u-margin--none'
                text={companyNames ?? 'No partner assigned'} 
                hoverInfo={<div className='u-static-size'>
                  <div className="u-margin-bottom--small">
                    <Text.Label extraClass='u-margin--none'>COMPANY</Text.Label>
                  </div>
                  <Text.Caption extraClass='u-margin--none'>To edit company you should contact your partner manager.</Text.Caption>
                </div>}/>
            </div>
            <div className="u-margin-bottom--small">
              <Text.Label extraClass='u-margin--none'>Email</Text.Label>
            </div>
            <div className='u-margin-bottom--big u-margin-sm-bottom--enormous'>
              <LockedText
                extraClass='u-margin--none' 
                text={email ?? ''} 
                hoverInfo={<div className='u-static-size'>
                  <div className="u-margin-bottom--small">
                    <Text.Label extraClass='u-margin--none'>EMAIL</Text.Label>
                  </div>
                  <Text.Caption extraClass='u-margin--none'>To edit the email you should contact your partner manager.</Text.Caption>
                </div>}/>
            </div>
            <div className="u-margin-bottom--small">
              <Text.Label extraClass='u-margin--none'>Password</Text.Label>
            </div>
            <div className='u-margin-bottom--big u-margin-sm-bottom--enormous'>
              <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 o-gutter-sm-right--big">
            <div className="u-margin-bottom--small">
              <Text.Label extraClass='u-margin--none'>Phone</Text.Label>
            </div>
            <div className="u-margin-bottom--big">
              <Input
                filled
                extraClass={'u-margin--none'}
                name={'phone'}
                value={newPhone ?? undefined}
                onChange={(e) => handleInputChange(setNewPhone, e)} />
            </div>
            <div className="u-margin-bottom--small">
              <Text.Label extraClass='u-margin--none'>Country</Text.Label>
            </div>
            <Dropdown
              filled
              extraClass='u-margin--none u-margin-bottom--big'
              options={countries}
              selected={newCountryId}
              emptySelectionLabel={'Choose country'}
              fullWidth
              createLabel={createCountryLabel}
              onChange={(value) => handleCountryChange(value)} />
          </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-justify-content-sm-end'>
            <div className='o-layout o-layout__item o-layout__item-6 o-layout__item-sm-auto o-gutter-right--tiny u-flex-column u-flex-grow-1 u-flex-sm-grow-0'>
              <Link
                className="c-button c-button--big c-button--border u-align--center u-font-size--caption"
                to={ROUTER.generate('accountSettingsRoute')}>
                Cancel
              </Link>
            </div>
            <div className='o-layout o-layout__item-6 o-layout__item-sm-auto o-gutter-left--tiny u-flex-column u-flex-grow-1 u-flex-sm-grow-0'>
              <button className="c-button c-button--big c-button--filled rounded--panel u-border-primary"
                type='submit'
                disabled={isSubmitDisabled}
              >
                Save changes
              </button>
            </div>
          </div>
        </div>
      </form>
    </>
  );
};