import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";

var _templateObject, _templateObject2;

import React, { useState } from 'react';
import styled from 'styled-components';
import { useUser, useGlobalLabels, useUpdateProfile, useReleva } from '@sentecacommerce-theme/lib';
import { useForm, Controller } from 'react-hook-form';
import { Button } from '../../../Common';
import { useProfileDispatch } from '../../profile.context';
import { NavigationSkeleton } from '../NavigationSkeleton';
import { RadioInput, PopupInput, TextInput, VerifyPhoneModal, UpdatePasswordModal, VerifyEmailModal } from './Components';
export var AccountSettings = () => {
  var _userData$email, _userData$phoneNumber;

  var {
    changeProfileData
  } = useReleva();
  var dispatch = useProfileDispatch();
  var [phoneModalStatus, setPhoneModalStatus] = useState(false);
  var [passwordModalStatus, setPasswordModalStatus] = useState(false);
  var [emailModalStatus, setEmailModalStatus] = useState(false);
  var {
    buttons,
    forms
  } = useGlobalLabels();
  var {
    data: userData
  } = useUser();
  var [mutate, {
    isLoading
  }] = useUpdateProfile({
    onSuccess: () => {}
  }); // TODO: make typezation

  var onSubmit = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(function* (data) {
      if (!userData) return;
      var dateOfBirth = data.dateOfBirth.split('-');
      changeProfileData();
      mutate({
        email: userData.email,
        firstName: data.firstName,
        lastName: data.lastName,
        gender: data.gender,
        dayOfBirth: +dateOfBirth[2],
        monthOfBirth: +dateOfBirth[1],
        yearOfBirth: +dateOfBirth[0],
        _id: userData._id,
        status: userData.status
      });
    });

    return function onSubmit(_x) {
      return _ref.apply(this, arguments);
    };
  }();

  var pad = int => {
    return (int == null ? void 0 : int.toString().padStart(2, '0')) || '';
  };

  var dateOfBirth = pad(userData == null ? void 0 : userData.yearOfBirth) + "-" + pad(userData == null ? void 0 : userData.monthOfBirth) + "-" + pad(userData == null ? void 0 : userData.dayOfBirth);

  var getGender = () => {
    var gender = '';
    if ((userData == null ? void 0 : userData.gender) === 0) gender = 0;
    if ((userData == null ? void 0 : userData.gender) === 1) gender = 1;
    return gender;
  };

  var {
    handleSubmit,
    errors,
    control
  } = useForm({
    defaultValues: _extends({}, userData, {
      dateOfBirth,
      firstName: (userData == null ? void 0 : userData.firstName) || '',
      lastName: (userData == null ? void 0 : userData.lastName) || '',
      gender: getGender()
    }),
    mode: 'onChange',
    reValidateMode: 'onChange'
  });
  var hasErrors = !!Object.keys(errors).length;
  var buttonDisabled = isLoading || hasErrors;
  return /*#__PURE__*/React.createElement(NavigationSkeleton, {
    url: "personal-info",
    header: "Personal Info"
  }, phoneModalStatus && /*#__PURE__*/React.createElement(VerifyPhoneModal, {
    handleClose: () => setPhoneModalStatus(false)
  }), passwordModalStatus && /*#__PURE__*/React.createElement(UpdatePasswordModal, {
    handleClose: () => setPasswordModalStatus(false)
  }), emailModalStatus && /*#__PURE__*/React.createElement(VerifyEmailModal, {
    handleClose: () => setEmailModalStatus(false)
  }), /*#__PURE__*/React.createElement("form", {
    noValidate: true,
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "firstName",
    rules: {
      required: forms.requiredField
    },
    as: /*#__PURE__*/React.createElement(TextInput, {
      label: forms.firstName,
      isRequired: true,
      id: "profile-first-name",
      errors: errors,
      name: "firstName"
    })
  }), /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "lastName",
    rules: {
      required: forms.requiredField
    },
    as: /*#__PURE__*/React.createElement(TextInput, {
      label: forms.lastName,
      isRequired: true,
      id: "profile-last-name",
      errors: errors,
      name: "lastName"
    })
  }), /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "dateOfBirth",
    rules: {
      required: forms.requiredField
    },
    as: /*#__PURE__*/React.createElement(TextInput, {
      label: forms.dateOfBirth,
      isRequired: true,
      type: "date",
      id: "profile-date-of-birth",
      errors: errors,
      name: "dateOfBirth"
    })
  }), /*#__PURE__*/React.createElement(PopupInput, {
    header: 'Email',
    label: (_userData$email = userData == null ? void 0 : userData.email) != null ? _userData$email : 'Email',
    handleClick: () => setEmailModalStatus(true)
  }), /*#__PURE__*/React.createElement(PopupInput, {
    header: 'Password',
    label: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
    handleClick: () => setPasswordModalStatus(true)
  }), /*#__PURE__*/React.createElement(PopupInput, {
    header: 'Mobile',
    label: (_userData$phoneNumber = userData == null ? void 0 : userData.phoneNumber) != null ? _userData$phoneNumber : 'Not set',
    handleClick: () => setPhoneModalStatus(!phoneModalStatus)
  }), /*#__PURE__*/React.createElement(RadioInputContainer, null, /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "gender",
    rules: {
      required: forms.requiredField
    },
    render: (_ref2) => {
      var {
        onChange,
        value,
        name
      } = _ref2;
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioInput, {
        label: forms.male,
        name: name,
        value: 0,
        isChecked: value === 0,
        onChange: onChange
      }), /*#__PURE__*/React.createElement(RadioInput, {
        label: forms.female,
        name: name,
        value: 1,
        isChecked: value === 1,
        onChange: onChange
      }));
    }
  })), /*#__PURE__*/React.createElement(SubmitWrapper, null, /*#__PURE__*/React.createElement(Button, {
    variant: "light",
    bordered: true,
    onClick: () => dispatch({
      type: 'reset'
    })
  }, buttons.reset), /*#__PURE__*/React.createElement(Button, {
    disabled: buttonDisabled,
    className: "ml-4",
    variant: buttonDisabled ? 'disabled' : 'primary'
  }, buttons.save))));
};
var RadioInputContainer = styled.div.attrs({
  className: 'pt-2 mt-1'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
var SubmitWrapper = styled.div.attrs({
  className: 'my-4'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n"])));
//# sourceMappingURL=index.js.map