import React, { useState } from 'react';
import PropTypes from 'prop-types';

import Textarea from 'Components/Inputs/Textarea';
import Dropdown from 'Components/Dropdown';
import TextInput from 'Components/Inputs/TextInput';
import DateInput from 'Components/Inputs/DateInput';
import CurrencyInput from 'Components/Inputs/CurrencyInput';
import BaseReportField from '../../Fields/BaseReportField';

import {
  GuaranteeRepeaterContainer,
  Wrapper,
  InputsWrapper,
  AlignElement
} from './GuaranteeRepeater.styles';

const technicalFormOptions = [
  { label: '', value: 'option-0' },
  { label: 'Garanzia Reale Ipoteca', value: 'option-1' },
  { label: 'Garanzia Reale Pegno', value: 'option-2' },
  { label: 'Garanzia Personale Fideiussione Specifica', value: 'option-3' },
  { label: 'Garanzia Personale Fideiussione Omnibus', value: 'option-4' }
];

const ifPersonalGuarantee = [
  { label: '', value: 'option-0' },
  {
    label: 'Garanzia da Amministrazioni centrali o settore pubblico',
    value: 'option-1'
  },
  { label: 'Garanzia da banche', value: 'option-2' },
  { label: 'Garanzia da intermediari finanziari: Confidi', value: 'option-3' },
  { label: 'Garanzia da intermediari finanziari: Altro', value: 'option-4' },
  { label: 'Garanzia da società non finanziarie', value: 'option-5' },
  { label: 'Altre garanzie personali', value: 'option-6' },
  { label: 'Altro', value: 'altro' },
  { label: 'Non applicabile', value: 'option-8' }
];

const ifRealMortgageGuarantee = [
  { label: '', value: 'option-0' },
  {
    label: 'Immobiliare: Residenzialea',
    value: 'option-1'
  },
  { label: 'Immobiliare: Commerciale', value: 'option-2' },
  { label: 'Immobiliare: Uffici', value: 'option-3' },
  { label: 'Immobiliare: Hotel', value: 'option-4' },
  { label: 'Immobiliare: Industriale', value: 'option-5' },
  { label: 'Immobiliare: Terreni', value: 'option-6' },
  { label: 'Immobiliare: Altro', value: 'option-7' },
  { label: 'Immobiliare: Misto Residenziale-Commerciale', value: 'option-8' },
  { label: 'Immobiliare: Misto Residenziale-Industriale', value: 'option-9' },
  { label: 'Immobiliare: Misto Commerciale-Industriale', value: 'option-10' },
  { label: 'Altro', value: 'altro' },
  { label: 'Non applicabile', value: 'option-12' }
];

const ifRealPledgeGuarantee = [
  { label: '', value: 'option-0' },
  {
    label: 'Beni Strumentali: Industriale',
    value: 'option-1'
  },
  { label: 'Beni Strumentali: settore automobilistico', value: 'option-2' },
  { label: 'Beni Strumentali: aviazione', value: 'option-3' },
  { label: 'Beni Strumentali: navigazione', value: 'option-4' },
  { label: 'Liquidità', value: 'option-5' },
  { label: 'Azioni', value: 'option-6' },
  { label: 'Titoli obbligazionari', value: 'option-7' },
  { label: 'Commodities', value: 'option-8' },
  { label: 'Altri strumenti finanziari', value: 'option-9' },
  { label: 'Altro', value: 'altro' },
  { label: 'Non applicabile', value: 'option-11' }
];

const mortgageOptions = [
  { label: '', value: 'option-0' },
  { label: '1° Grado', value: 'option-1' },
  { label: '2° Grado', value: 'option-2' },
  { label: 'Altro', value: 'option-3' }
];

const GuaranteeRepeater = ({ pathname }) => {
  const [otherValueStatus, setOtherValueStatus] = useState(false);
  const [categoryFormOptions, setCategoryFormOptions] = useState([
    { label: '', value: 'option' }
  ]);

  const technicalFormOptionsHandler = value => {
    if (value === 'option-1') {
      setCategoryFormOptions([...ifRealMortgageGuarantee]);
    } else if (value === 'option-2') {
      setCategoryFormOptions([...ifRealPledgeGuarantee]);
    } else if (value === 'option-0') {
      setCategoryFormOptions([{ label: '', value: 'option-0' }]);
      if (otherValueStatus) {
        setOtherValueStatus(false);
      }
    } else {
      setCategoryFormOptions([...ifPersonalGuarantee]);
    }
  };

  const otherValueStatusHandler = value => {
    if (value === 'altro') {
      setOtherValueStatus(true);
    } else {
      setOtherValueStatus(false);
    }
  };

  return (
    <GuaranteeRepeaterContainer>
      <Wrapper pathname={pathname}>
        <BaseReportField label="ID Garanzia" field={<TextInput />} />
        <BaseReportField label="ID Posizione" field={<TextInput />} />
        <BaseReportField label="ID Garante" field={<TextInput />} />
        <BaseReportField
          label="Forma Tecnica"
          field={
            <Dropdown
              title=""
              options={technicalFormOptions}
              onChange={technicalFormOptionsHandler}
            />
          }
        />
        <BaseReportField
          label="Categoria Forma Tecnica"
          field={
            <Dropdown
              options={categoryFormOptions}
              onChange={otherValueStatusHandler}
            />
          }
        />
        {otherValueStatus && (
          <AlignElement>
            <BaseReportField
              label="Descrivi Altro"
              field={
                <Textarea
                  placeholder="Aggiungi una descrizione"
                  expand={true}
                />
              }
            />
          </AlignElement>
        )}
        <InputsWrapper pathname={pathname}>
          <BaseReportField label="Valore Garanzia" field={<CurrencyInput />} />
          <BaseReportField label="Data di Iscrizione" field={<DateInput />} />
          <BaseReportField label="Data della Garanzia " field={<DateInput />} />
        </InputsWrapper>
        <BaseReportField
          label="Grado Ipoteca"
          field={<Dropdown options={mortgageOptions} />}
        />
        <InputsWrapper pathname={pathname}>
          <BaseReportField
            label="Gravami Precedenti"
            field={<CurrencyInput />}
          />
          <BaseReportField
            label="Ipoteche di Pari Grado"
            field={<CurrencyInput />}
          />
        </InputsWrapper>
      </Wrapper>
    </GuaranteeRepeaterContainer>
  );
};

GuaranteeRepeater.propTypes = {
  pathname: PropTypes.string
};

GuaranteeRepeater.defaultProps = {
  pathname: ''
};

export default GuaranteeRepeater;