import React, { useState, useEffect } from 'react';
import { Field } from 'react-final-form';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';

import Input from 'components/formItems/Input';
import Password from 'components/formItems/Password';
import CustomSelect from 'components/formItems/CustomSelect';
import DateTimePicker from 'components/formItems/DateTimePicker';
import UploadZone from 'components/formItems/UploadZone';

import Textarea from 'components/formItems/Textarea';
import SwitchInput from 'components/formItems/SwitchInput';
import Radio from 'components/formItems/Radio';
import Checkbox from 'components/formItems/Checkbox';

import GeoLocInput from 'components/formItems/GeoLocInput';
import { useDispatch } from 'react-redux';
import actionsBuilder from 'store/appActions';
import FormElement from 'components/structure/FormElement';
import FieldWrapper from 'components/structure/FieldWrapper';
import FormItemLabel from 'components/items/FormItemLabel';
import TimePicker from 'components/formItems/TimePicker';
import styleIdentifiers from './projectInput.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ProjectInputProps = StateProps & DispatchProps & OwnProps;

const FakeInput = props => {
  const { value, input } = props;

  const displayedValue = (input && input.value) || value;
  return (
    <FormElement {...props} meta={{}}>
      <FieldWrapper {...props} meta={{}}>
        {displayedValue && <div className={styles('value')}>{displayedValue}</div>}
      </FieldWrapper>
    </FormElement>
  );
};

const ProjectInput = (props: ProjectInputProps) => {
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const actions = actionsBuilder(dispatch, ['upload']);

  const {
    seed,
    customClassName,
    fieldWrapperClassName,
    customContentWrapperClassName,
    requiredClassName,
    radioTextClassName,
    uploadPreviewClassName,
  } = props;

  const commonProps = {
    className: styles('ProjectInput', customClassName, requiredClassName),
    labelClassName: styles('label'),
    fieldWrapperClassName: styles('field-wrapper', fieldWrapperClassName),
    contentWrapperClassName: styles('content-wrapper', customContentWrapperClassName),
    errorClassName: styles('error'),
    withBorder: true,
    small: true,
  };

  const getComponent = () => {
    if (seed === 'fake') return FakeInput;

    if (seed === 'date') return DateTimePicker;

    if (seed === 'textarea') return Textarea;

    if (seed === 'switch') return SwitchInput;

    if (seed === 'password') return Password;

    return Input;
  };

  if (seed === 'checkbox') {
    return <Checkbox {...commonProps} useBox {...props} />;
  }

  if (seed === 'time') {
    return (
      <TimePicker
        {...commonProps}
        activeWrapperClassName={styles('active-select')}
        valueClassName={styles('select-value')}
        itemsClassName={styles('select-items')}
        itemClassName={styles('select-item')}
        itemsContentWrapperClassName={styles('select-items-content-wrapper')}
        {...props}
      />
    );
  }

  if (seed === 'select') {
    return (
      <CustomSelect
        {...commonProps}
        activeWrapperClassName={styles('active-select')}
        valueClassName={styles('select-value')}
        itemsClassName={styles('select-items')}
        itemClassName={styles('select-item')}
        itemsContentWrapperClassName={styles('select-items-content-wrapper')}
        {...props}
      />
    );
  }

  if (seed === 'geoloc') {
    return (
      <GeoLocInput
        {...commonProps}
        activeWrapperClassName={styles('active-select')}
        valueClassName={styles('select-value')}
        itemsClassName={styles('select-items')}
        itemClassName={styles('select-item')}
        itemsContentWrapperClassName={styles('select-items-content-wrapper')}
        {...props}
      />
    );
  }

  if (seed === 'radio') {
    return (
      <Radio
        {...commonProps}
        className={styles('ProjectInput', 'radio-input', customClassName, requiredClassName)}
        textClassName={styles(radioTextClassName)}
        {...props}
      />
    );
  }

  if (seed === 'upload') {
    return (
      <UploadZone
        {...commonProps}
        className={styles('ProjectInput', requiredClassName)}
        // specific
        apollo
        displayValue="large"
        upload={actions.fileUpload}
        asObject
        // showProgress
        dropZoneClassName={styles('dropzone', customClassName)}
        previewClassName={styles('preview', uploadPreviewClassName)}
        {...props}
      />
    );
  }

  const Component = getComponent();

  return <Component {...commonProps} {...props} />;
};

export default ProjectInput;
