import React, { useEffect, useState } from 'react';
import ProfileSection from '../../components/common/wrappers/ProfileWrapper';
import { TextInput } from '../../components/common/inputs/TextInput';
import { CheckboxProfile } from '../../components/common/inputs/Checkbox';
import { SelectDrop } from '../../components/common/inputs/SelectDrop';
import {
  DeleteButton,
  NofillButtonsm,
  PrimaryButton,
} from '../../components/common/buttons/PrimaryBtn';
import { ModalWrapper } from '../modals/ModalWrapper.modal';
import styled from 'styled-components';
import { connect } from 'react-redux';
import {
  getUserProfile,
  updateUserProfile,
} from '../../redux/action-creators/settings-actions/settings.actions';
import { getUploadUrl } from '../../utils/helpers';
import { useToasts } from 'react-toast-notifications';
import { fetchCountries } from '../../redux/action-creators/client-actions/client.actions';

const ProfilePage = ({
  updateUserProfile,
  getUserProfile,
  userProfile,
  fetchCountries,
}) => {
  const [deleteModal, setdeleteModal] = useState(false);
  const [loading, setLoading] = useState(false);
  const [userPhoto, setUserPhoto] = useState('');
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [gender, setGender] = useState('');
  const [phone, setPhone] = useState('');
  const [country, setCountry] = useState({});
  const [companyName, setCompanyname] = useState('');
  const [companyTitle, setCompanyTitle] = useState('');
  const [countries, setCountries] = useState([]);
  const [uploading, setUploading] = useState(false);
  const { addToast } = useToasts();

  const editProfile = async () => {
    setLoading(true);
    getUserProfile();
    const payload = {
      profilePicture: userPhoto,
      firstName,
      lastName,
      email,
      gender,
      phone,
      country: country?.name,
      companyTitle,
      companyName,
    };
    const updatedProfile = await updateUserProfile(payload);

    if (updatedProfile?.success === true) {
      setLoading(false);
      addToast('Profile updated successfully', {
        appearance: 'success',
      });
    } else {
      setLoading(false);
      addToast('An error occured', {
        appearance: 'error',
      });
    }
  };

  useEffect(() => {
    const onGetUserProfile = async () => {
      const { data, success } = await getUserProfile();

      if (success) {
        setUserPhoto(data.profilePicture);
        setFirstName(data.firstName);
        setLastName(data.lastName);
        setEmail(data.email);
        setGender(data.gender);
        setPhone(data.phone);
        setCountry(data.country);
        setCompanyname(data.companyName);
        setCompanyTitle(data.companyTitle);
      }
    };

    onGetUserProfile();

    const getAllcountries = async () => {
      const res = await fetchCountries();

      if (res.success) {
        setCountries(res.data);
      }
    };

    getAllcountries();
  }, [getUserProfile, fetchCountries]);

  const onUploadImage = async file => {
    setUploading(true);
    const upload = await getUploadUrl(file);

    if (upload?.data?.success) {
      setUserPhoto(upload.data.data[0]);
    }

    setUploading(false);
  };

  return /*#__PURE__*/ React.createElement(
    'div',
    null,
    /*#__PURE__*/ React.createElement(
      Profile,
      {
        className: 'user-info',
      },
      /*#__PURE__*/ React.createElement(
        Avatar,
        null,
        /*#__PURE__*/ React.createElement('input', {
          name: 'profilePicture',
          placeholder: 'upload file',
          id: 'profilePicture',
          accept: 'image/x-png,image/gif,image/jpeg .jfif, .jpeg, .jpg, .png',
          type: 'file',
          onChange: e => onUploadImage(e.target.files[0]),
        }),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'content',
          },
          userPhoto
            ? /*#__PURE__*/ React.createElement(
                'span',
                null,
                /*#__PURE__*/ React.createElement('img', {
                  alt: '',
                  height: 100,
                  width: 100,
                  src: userPhoto,
                  style: {
                    borderRadius: '50%',
                  },
                })
              )
            : /*#__PURE__*/ React.createElement(
                'h3',
                null,
                userProfile?.firstName.charAt(0),
                userProfile?.lastName.charAt(0)
              ),
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#camera',
            })
          )
        )
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'info-details',
        },
        /*#__PURE__*/ React.createElement(
          'h3',
          null,
          userProfile?.firstName,
          ' ',
          userProfile?.lastName
        ),
        /*#__PURE__*/ React.createElement('p', null, userProfile?.email)
      )
    ),
    uploading
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            style: {
              marginTop: '-1rem',
            },
          },
          'Uploading...'
        )
      : '',
    /*#__PURE__*/ React.createElement(
      ProfileSection,
      null,
      /*#__PURE__*/ React.createElement(
        'h3',
        null,
        'Personal details ',
        /*#__PURE__*/ React.createElement(
          'span',
          null,
          'Customize your account name'
        )
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'flex-width-1-2 mb-2',
        },
        /*#__PURE__*/ React.createElement(TextInput, {
          type: 'text',
          label: 'First Name',
          name: 'firstName',
          value: firstName,
          onchange: e => setFirstName(e.target.value),
          placeholder: 'Enter your first name',
        }),
        /*#__PURE__*/ React.createElement(TextInput, {
          type: 'text',
          label: 'Last Name',
          name: 'lastName',
          value: lastName,
          onchange: e => setLastName(e.target.value),
          placeholder: 'Enter your last name',
        })
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'flex-width-1-2',
        },
        /*#__PURE__*/ React.createElement(
          'div',
          null,
          /*#__PURE__*/ React.createElement('p', null, 'Select your Gender'),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx-alc-jsb py-1',
            },
            /*#__PURE__*/ React.createElement(
              'span',
              {
                onClick: () => setGender('female'),
              },
              /*#__PURE__*/ React.createElement(CheckboxProfile, {
                type: 'radio',
                label: 'female',
                name: 'gender',
                className: 'alt',
                checked: gender === 'female',
              })
            ),
            /*#__PURE__*/ React.createElement(
              'span',
              {
                onClick: () => setGender('male'),
              },
              /*#__PURE__*/ React.createElement(CheckboxProfile, {
                type: 'radio',
                label: 'male',
                name: 'gender',
                className: 'alt',
                checked: gender === 'male',
              })
            ),
            /*#__PURE__*/ React.createElement(
              'span',
              {
                onClick: () => setGender('others'),
              },
              /*#__PURE__*/ React.createElement(CheckboxProfile, {
                type: 'radio',
                label: 'others',
                name: 'gender',
                className: 'alt',
                checked: gender === 'others',
              })
            )
          )
        ),
        /*#__PURE__*/ React.createElement(SelectDrop, {
          type: 'text',
          label: 'Country',
          placeholder: 'Select country',
          onchange: setCountry,
          value: country?.name,
          countries: countries,
        })
      )
    ),
    /*#__PURE__*/ React.createElement(
      ProfileSection,
      null,
      /*#__PURE__*/ React.createElement(
        'h3',
        null,
        'Contact details ',
        /*#__PURE__*/ React.createElement(
          'span',
          null,
          'Customize your contact details'
        )
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'flex-width-1-2',
        },
        /*#__PURE__*/ React.createElement(TextInput, {
          type: 'email',
          label: 'Email address',
          name: 'email',
          value: email,
          onchange: e => setEmail(e.target.value),
          placeholder: 'Enter your email',
        }),
        /*#__PURE__*/ React.createElement(TextInput, {
          type: 'text',
          label: 'Mobile number',
          name: 'phone',
          value: phone,
          onchange: e => setPhone(e.target.value),
          placeholder: 'Enter your mobile number',
        })
      )
    ),
    /*#__PURE__*/ React.createElement(
      ProfileSection,
      null,
      /*#__PURE__*/ React.createElement(
        'h3',
        null,
        'Professional details ',
        /*#__PURE__*/ React.createElement(
          'span',
          null,
          'Tell us about what you do'
        )
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'flex-width-1-2',
        },
        /*#__PURE__*/ React.createElement(TextInput, {
          type: 'text',
          label: 'Company name',
          name: 'companyName',
          value: companyName,
          onchange: e => setCompanyname(e.target.value),
          placeholder: 'Enter your company name',
        }),
        /*#__PURE__*/ React.createElement(TextInput, {
          type: 'text',
          label: 'job title',
          name: 'companyTitle',
          value: companyTitle,
          onchange: e => setCompanyTitle(e.target.value),
          placeholder: 'Enter your job title',
        })
      )
    ),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: 'd-flx-alc-jsb py-3 mt-3',
      },
      /*#__PURE__*/ React.createElement(
        'div',
        null,
        /*#__PURE__*/ React.createElement(NofillButtonsm, {
          title: 'Delete your Useforms account',
          onclick: () => setdeleteModal(true),
        }),
        /*#__PURE__*/ React.createElement(
          ModalWrapper,
          {
            width: 450,
            visible: deleteModal,
            setvisible: setdeleteModal,
            title: 'You\u2019re about to delete a folder',
          },
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'px-4',
            },
            /*#__PURE__*/ React.createElement(
              'p',
              null,
              'You\u2019ll loose everything on this workspace including your',
              ' ',
              /*#__PURE__*/ React.createElement(
                'span',
                null,
                'forms and responses'
              ),
              '.'
            )
          ),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx-alc-jfe modal-action-wrap px-4 py-1',
            },
            /*#__PURE__*/ React.createElement(NofillButtonsm, {
              title: 'No, I\u2019ll pass',
              onclick: () => setdeleteModal(false),
            }),
            /*#__PURE__*/ React.createElement(DeleteButton, {
              title: 'Delete',
            })
          )
        )
      ),
      /*#__PURE__*/ React.createElement(PrimaryButton, {
        text: loading ? 'Saving...' : 'Save changes',
        onclick: () => editProfile(),
      })
    )
  );
};

const mapStateToProps = state => ({
  userProfile: state.settings.profile,
});

export default connect(mapStateToProps, {
  updateUserProfile,
  getUserProfile,
  fetchCountries,
})(ProfilePage);
const Profile = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 4rem;
  .profile-avatar {
  }
  .info-details {
    width: calc(100% - 110px);
    h3 {
      color: #1b215c;
      font-family: var(--ff-sbold);
      font-weight: 600;
      font-size: 2rem;
      line-height: 1.28;
    }
    p {
      font-size: 1.6rem;
    }
  }
`;
const Avatar = styled.label`
  position: relative;
  background: #c5c9da;
  border-radius: 50%;
  input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  .content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c5c9da;
    padding: 0.8rem 0;
    color: #838ca2;
    border-radius: 50%;
    width: 88px;
    height: 88px;
    border: 1px solid #e8edff;
    svg {
      position: absolute;
      right: -5px;
      bottom: 0rem;
      width: 30px;
      height: 30px;
      padding: 0.5rem;
      border-radius: 50%;
      background: #004bff;
      border: 3px solid #ffffff;
      color: #fff;
    }
    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    span {
      margin-left: 0.5rem;
      font-family: var(--ff-heading);
      font-weight: 700;
      font-size: 2.8rem;
      color: #838ca2;
      text-transform: Uppercase;
    }
  }
`;
