import React from 'react';
import { Input, Notification, toast, FormContainer } from '@/components/ui';
import FormDesription from './FormDesription';
import FormRow from './FormRow';
import { Field, Form, Formik } from 'formik';

import { HiOutlineMail, HiOutlineBriefcase, HiOutlineUserCircle, HiOutlineDeviceMobile } from 'react-icons/hi';
import * as Yup from 'yup';
import { useSelector } from 'react-redux';

import { useTranslation } from 'react-i18next';
/*
const { Control } = components;
*/
const validationSchema = Yup.object().shape({
  name: Yup.string().min(3, 'TOO_SHORT').max(12, 'Too Long!').required('User Name Required'),
  email: Yup.string().email('Invalid email').required('Email Required'),
  title: Yup.string(),

  lang: Yup.string(),
});
/*
const langOptions = [
  { value: 'en', label: 'English (US)', imgPath: '/img/countries/us.png' },
  { value: 'ch', label: '中文', imgPath: '/img/countries/cn.png' },
  { value: 'jp', label: '日本语', imgPath: '/img/countries/jp.png' },
  { value: 'fr', label: 'French', imgPath: '/img/countries/fr.png' },
];*/
/*
const CustomSelectOption = ({ innerProps, label, data, isSelected }) => {
  return (
    <div
      className={`flex items-center justify-between p-2 ${
        isSelected ? 'bg-gray-100 dark:bg-gray-500' : 'hover:bg-gray-50 dark:hover:bg-gray-600'
      }`}
      {...innerProps}
    >
      <div className="flex items-center">
        <Avatar shape="circle" size={20} src={data.imgPath} />
        <span className="ml-2 rtl:mr-2">{label}</span>
      </div>
      {isSelected && <HiCheck className="text-emerald-500 text-xl" />}
    </div>
  );
};*/
/*
const CustomControl = ({ children, ...props }) => {
  const selected = props.getValue()[0];
  return (
    <Control {...props}>
      {selected && <Avatar className="ltr:ml-4 rtl:mr-4" shape="circle" size={18} src={selected.imgPath} />}
      {children}
    </Control>
  );
};
*/
const Profile = ({ data }) => {
  const { t } = useTranslation();
  /* const onSetFormFile = (form, field, file) => {
    form.setFieldValue(field.name, URL.createObjectURL(file[0]));
  }; */
  const { authority, fullName } = useSelector((state) => state.auth.user);
  const locale = useSelector((state) => state.locale.currentLang);
  const onFormSubmit = (values, setSubmitting) => {
    toast.push(<Notification title={'Profile updated'} type="success" />, {
      placement: 'top-center',
    });
    setSubmitting(false);
  };

  return (
    <Formik
      initialValues={{
        email: data?.email || '',
        role: authority || '',
        fullName: fullName || '',
        mobileNo: data?.mobileNo || '',
        commercialName: locale === 'ar' ? data?.commercialNameArabic : data?.commercialNameEnglish || '',
      }}
      enableReinitialize
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting }) => {
        setSubmitting(true);
        setTimeout(() => {
          onFormSubmit(values, setSubmitting);
        }, 1000);
      }}
    >
      {({ values, touched, errors, isSubmitting, resetForm }) => {
        const validatorProps = { touched, errors };
        return (
          <Form>
            <FormContainer>
              <FormDesription title={t('General info')} />
              <FormRow name="fullName" label={t('Name')} {...validatorProps}>
                <Field
                  type="text"
                  autoComplete="off"
                  name="fullName"
                  placeholder={t('Name')}
                  component={Input}
                  disabled="disabled"
                  prefix={<HiOutlineUserCircle className="text-xl" />}
                />
              </FormRow>
              <FormRow
                name="commercialName"
                label={authority[0] === 'OWNER' ? t('FULL_NAME') : t('COMMERCIAL_NAME')}
                {...validatorProps}
              >
                <Field
                  type="text"
                  autoComplete="off"
                  name="commercialName"
                  placeholder={t('COMMERCIAL_NAME')}
                  component={Input}
                  disabled="disabled"
                  prefix={<HiOutlineUserCircle className="text-xl" />}
                />
              </FormRow>

              <FormRow name="email" label={t('EMAIL')} {...validatorProps}>
                <Field
                  type="email"
                  autoComplete="off"
                  name="email"
                  placeholder={t('EMAIL')}
                  component={Input}
                  disabled="disabled"
                  prefix={<HiOutlineMail className="text-xl" />}
                />
              </FormRow>

              <FormRow name="role" label={t('BUSINESS_ACTIVITY_TYPE')} {...validatorProps}>
                <Field
                  type="text"
                  autoComplete="off"
                  name="role"
                  placeholder={t('BUSINESS_ACTIVITY_TYPE')}
                  component={Input}
                  value={t(values.role)}
                  disabled="disabled"
                  prefix={<HiOutlineBriefcase className="text-xl" />}
                />
              </FormRow>
              <FormRow name="mobileNo" label={t('Mobile')} {...validatorProps} border={false}>
                <Field
                  type="text"
                  autoComplete="off"
                  name="mobileNo"
                  placeholder={t('Mobile')}
                  component={Input}
                  disabled="disabled"
                  value={values?.mobileNo?.replace('+', '00')}
                  prefix={<HiOutlineDeviceMobile className="text-xl" />}
                />
              </FormRow>
              {/*} <FormDesription
                className="mt-8"
                title="Preferences"
                desc="Your personalized preference displayed in your account"
              />
              <FormRow name="lang" label="Language" {...validatorProps}>
                <Field name="lang">
                  {({ field, form }) => (
                    <Select
                      field={field}
                      form={form}
                      options={langOptions}
                      components={{
                        Option: CustomSelectOption,
                        Control: CustomControl,
                      }}
                      value={langOptions.filter((option) => option.value === values?.lang)}
                      onChange={(option) => form.setFieldValue(field.name, option.value)}
                    />
                  )}
                </Field>
              </FormRow>*/}
              {/*
              <div className="mt-4 ltr:text-right">
                <Button className="ltr:mr-2 rtl:ml-2" type="button" onClick={resetForm}>
                  Reset
                </Button>
                <Button variant="solid" loading={isSubmitting} type="submit">
                  {isSubmitting ? 'Updating' : 'Update'}
                </Button>
              </div> */}
            </FormContainer>
          </Form>
        );
      }}
    </Formik>
  );
};

export default Profile;
