import React from 'react';
import { Field } from 'react-final-form';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import Input from 'components/formItems/Input';
import Button from 'components/items/Button';
import ProjectInput from 'components/formItems/ProjectInput';
import ProjectButton from 'components/items/ProjectButton';
import { required, email, composeValidators } from 'store/utils/validation';
import TextItem from 'components/items/TextItem';
import styleIdentifiers from './notificationsForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type NotificationsFormProps = StateProps & DispatchProps & OwnProps;

const NotificationsForm = (props: NotificationsFormProps) => {
  const { handleSubmit, submitting, valid, colors, viewConfig, initialValues } = props;

  // mapStateToProps
  const content = useSelector((state: StoreState) => state.content.raw);

  return (
    <form className={styles('NotificationsForm')} onSubmit={handleSubmit}>
      <p className={styles('strong')}>
        <TextItem path="pages.account.notification" />
      </p>
      <Field
        component={ProjectInput}
        name="notifications.email"
        seed="switch"
        label="forms.notification.email"
        className={styles('custom-switch')}
        customClassName={styles('custom-handle-bg')}
        inputClassName={styles('custom-switch-input')}
        switchClassName={styles('custom-switch-switch')}
        labelClassName={styles('label-switch')}
        onColor="#5FB77D"
        offColor="#FFF"
        width={70}
        height={30}
      />
      <Field
        component={ProjectInput}
        name="notifications.pushNotifications"
        seed="switch"
        label="forms.notification.pushNotif"
        className={styles('custom-switch')}
        customClassName={styles('custom-handle-bg')}
        inputClassName={styles('custom-switch-input')}
        switchClassName={styles('custom-switch-switch')}
        labelClassName={styles('label-switch')}
        onColor="#5FB77D"
        offColor="#FFF"
        width={70}
        height={30}
      />
      <Field
        component={ProjectInput}
        name="notifications.sms"
        seed="switch"
        label="forms.notification.sms"
        className={styles('custom-switch')}
        customClassName={styles('custom-handle-bg')}
        inputClassName={styles('custom-switch-input')}
        switchClassName={styles('custom-switch-switch')}
        labelClassName={styles('label-switch')}
        onColor="#5FB77D"
        offColor="#FFF"
        width={70}
        height={30}
      />
      <p className={styles('strong')}>
        <TextItem path="pages.account.reminder" />
      </p>
      <Field
        component={ProjectInput}
        name="reminders.email"
        seed="switch"
        label="forms.notification.email"
        className={styles('custom-switch')}
        customClassName={styles('custom-handle-bg')}
        inputClassName={styles('custom-switch-input')}
        switchClassName={styles('custom-switch-switch')}
        labelClassName={styles('label-switch')}
        onColor="#5FB77D"
        offColor="#FFF"
        width={70}
        height={30}
      />
      <Field
        component={ProjectInput}
        name="reminders.pushNotifications"
        seed="switch"
        label="forms.notification.pushNotif"
        className={styles('custom-switch')}
        customClassName={styles('custom-handle-bg')}
        inputClassName={styles('custom-switch-input')}
        switchClassName={styles('custom-switch-switch')}
        labelClassName={styles('label-switch')}
        onColor="#5FB77D"
        offColor="#FFF"
        width={70}
        height={30}
      />
      <Field
        component={ProjectInput}
        name="reminders.sms"
        seed="switch"
        label="forms.notification.sms"
        className={styles('custom-switch')}
        customClassName={styles('custom-handle-bg')}
        inputClassName={styles('custom-switch-input')}
        switchClassName={styles('custom-switch-switch')}
        labelClassName={styles('label-switch')}
        onColor="#5FB77D"
        offColor="#FFF"
        width={70}
        height={30}
      />

      <p className={styles('strong')}>
        <TextItem path="pages.account.offer" />
      </p>
      <Field
        component={ProjectInput}
        name="promotions.email"
        seed="switch"
        label="forms.notification.email"
        className={styles('custom-switch')}
        customClassName={styles('custom-handle-bg')}
        inputClassName={styles('custom-switch-input')}
        switchClassName={styles('custom-switch-switch')}
        labelClassName={styles('label-switch')}
        onColor="#5FB77D"
        offColor="#FFF"
        width={70}
        height={30}
      />
      <Field
        component={ProjectInput}
        name="promotions.pushNotifications"
        seed="switch"
        label="forms.notification.pushNotif"
        className={styles('custom-switch')}
        customClassName={styles('custom-handle-bg')}
        inputClassName={styles('custom-switch-input')}
        switchClassName={styles('custom-switch-switch')}
        labelClassName={styles('label-switch')}
        onColor="#5FB77D"
        offColor="#FFF"
        width={70}
        height={30}
      />
      <Field
        component={ProjectInput}
        name="promotions.sms"
        seed="switch"
        label="forms.notification.sms"
        className={styles('custom-switch')}
        customClassName={styles('custom-handle-bg')}
        inputClassName={styles('custom-switch-input')}
        switchClassName={styles('custom-switch-switch')}
        labelClassName={styles('label-switch')}
        onColor="#5FB77D"
        offColor="#FFF"
        width={70}
        height={30}
      />

      <ProjectButton
        color="primary"
        label="forms.notification.save"
        rounded
        onSubmit={handleSubmit}
        type="submit"
      />
    </form>
  );
};

export default NotificationsForm;
