SimulatorForm.tsx

import * as React from 'react';
import * as ptBRLocale from 'date-fns/locale/pt-BR';
import addYears from 'date-fns/addYears';
import CurrencyInput from 'react-currency-input';
import {
  useForm,
  Controller,
} from 'react-hook-form';

import {
  KeyboardDatePicker,
  MuiPickersUtilsProvider,
} from '@material-ui/pickers';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import LinearProgress from '@material-ui/core/LinearProgress';
import Slider from '@material-ui/core/Slider';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import FormControl from '@material-ui/core/FormControl';
import TextInput from '@material-ui/core/TextField';
import DateFnsUtils from '@date-io/date-fns';
import Button from '@material-ui/core/Button';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';

import Card from '../common/Card';

import { useSnackbarWithStatus } from '../common/snackbar/SnackbarContext';
import {
  TypeProduct,
  TERM_RANGE,
  LOAN_VALUE_RANGE,
  calculateMaxTermByBirthDate,
} from './components/form/helpers';
import { Simulation } from '../lead/preProposal/simulator/helpers';
export { simulatorValidationSchema } from './components/form/validationSchema';

const useStyles = makeStyles(() => createStyles({
  content: {
    padding: 0,
  },
  label: {
    color: '#707070',
    fontSize: 12,
    marginBottom: 4,
  },
  input: {
    border: '1px solid #dddddd',
    borderRadius: 13,
    height: 28,
    boxSizing: 'border-box',
    fontSize: 11,
    padding: '6px 14px',
    outline: 0,
    color: '#4f4f4f'
  },
  actions: {
    display: 'flex',
    justifyContent: 'center',
  },
}));

export const defaultValues = {
  propertyValue: 0,
  loanValue: 0,
  term: TERM_RANGE[TypeProduct.PURCHASE].max,
  product: TypeProduct.PURCHASE,
  birthDate: null,
  timePeriod: 0,
  financialAnalysisValue: 0, //financiar analise juridica
  fundEvaluatingPropertyValue: 0, //financiar Avaliacao Imovel
  financialAnalysis: false, //financiar analise juridica
  fundEvaluatingProperty: false, //financiar Avaliacao Imovel
  fundRateFee: false, //financiarTaxaCartorio
  fundIOF: false, //financiarIOF
  financeRateRegister: false, //financiarTaxaCadastro
  fundITBI: false, //financiarITBI
};

// export const onChangeProduct = ({ name, setValue, values }) => (e) => {
//   const { value } = e.target;
//   const termRange = TERM_RANGE[value];
//   const loanValueRange = LOAN_VALUE_RANGE[value];
//   setValue(name, value);
//   Object.entries(defaultValues).map(([field, value]) => {
//     if (
//       !['propertyValue', 'birthDate', 'loanValue', 'term', 'product'].includes(
//         field,
//       )
//     ) {
//       setValue(field, value);
//     }
//   });
//   if (termRange) setValue('term', termRange.max);
//   if (loanValueRange) {
//     const { propertyValue } = values;
//     if (loanValueRange.max(propertyValue) < loanValueRange.min)
//       return setValue('loanValue', loanValueRange.min);
//     if (propertyValue < 200000)
//       return setValue('loanValue', loanValueRange.max(200000));
//     setValue('loanValue', loanValueRange.max(200000));
//   }
// };

// export const onChangeBirthDate = ({ name, setValue, values }) => (
//   value,
// ) => {
//   const range = TERM_RANGE[values.product];
//   const months = calculateMaxTermByBirthDate({
//     birthDate: value,
//     value: range.max,
//   });
//   const termExcess = months - 966;
//   setValue(name, value);
//   if (termExcess > 0) {
//     const maxTerm = range.max - termExcess;
//     if (maxTerm < 0) setValue('term', 0);
//     else setValue('term', maxTerm);
//   }
// };


const SimulatorFormPoc: React.FC = () => {
  const classes = useStyles()
  const { handleSubmit, setValue, control, watch, register } = useForm({ defaultValues })

  React.useEffect(() => {
    register({ name: "term" });
    register({ name: "financialAnalysis" });
    register({ name: "financialAnalysisValue" });
    register({ name: "fundEvaluatingPropertyValue" });
    register({ name: "fundEvaluatingProperty" });
    register({ name: "fundRateFee" });
    register({ name: "fundIOF" });
    register({ name: "financeRateRegister" });
    register({ name: "fundITBI" });
  }, [register]);

  const onSubmit = async (data) => {
    console.log(data)
  }

  const term = watch('term')
  const financialAnalysis = watch('financialAnalysis')
  return (
    <Card>
      <CardContent className={classes.content}>
        <FormControl fullWidth>
          <label className={classes.label} htmlFor="product">Produto</label>
          <Controller
            as={TextInput}
            control={control}
            name="product"
            select
            defaultValue=""
            SelectProps={{
              native: true,
            }}
            InputProps={{
              disableUnderline: true,
              classes: {
                root: classes.input,
              }
            }}
          >
            {Object.values(TypeProduct).map((type) => (
              <option key={type} value={type}>{type}</option>
            ))}
          </Controller>
        </FormControl>
        <FormControl fullWidth>
          <label className={classes.label} htmlFor="propertyValue">Valor do Imóvel</label>
          <Controller 
            as={CurrencyInput}
            control={control}
            className={classes.input} 
            id="propertyValue" 
            aria-describedby="propertyValue"
            name='propertyValue'
            defaultValue=""
            type="tel"
            prefix="R$ "
            decimalSeparator=","
            thousandSeparator="."
            allowEmpty={true}
          />
        </FormControl>
        <FormControl fullWidth>
          <label className={classes.label} htmlFor="loanValue">Valor do Financiamento</label>
          <Controller
            as={CurrencyInput}
            control={control} 
            className={classes.input} 
            id="loanValue" 
            aria-describedby="loanValue"
            name="loanValue"
            defaultValue=""
            type="tel"
            prefix="R$ "
            decimalSeparator=","
            thousandSeparator="."
            allowEmpty={true}
          />
        </FormControl>
        <FormControl>
          <label className={classes.label} htmlFor="term">Data de Nascimento</label>
          <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBRLocale}>
            <Controller
              as={KeyboardDatePicker}
              control={control}
              disableToolbar
              variant="inline"
              inputVariant="outlined"
              format="dd/MM/yyyy"
              id="birthDate"
              label="Data de Nascimento"
              fullWidth
              name="birthDate"
              defaultValue={null}
              KeyboardButtonProps={{
                'aria-label': 'change date'
              }}
            />
          </MuiPickersUtilsProvider>
        </FormControl>
        <FormControl>
          <label className={classes.label} htmlFor="term">Prazo</label>
          <Slider
            step={1}
            min={1}
            max={100}
            valueLabelDisplay="on"
            name="term"
            value={term}
            onChangeCommitted={(_, value) => setValue('term', value)}
          />
        </FormControl>
        <FormControl fullWidth>
          <FormGroup>
            <FormControlLabel
              control={
                <Checkbox 
                  checked={financialAnalysis}
                  onChange={(e) => setValue('financialAnalysis', e.target.checked)} 
                  name="financialAnalysis"
                />
              }
              label="Financiar Taxa de Cartório"
              className={classes.label}
            />
          </FormGroup>
        </FormControl>
      </CardContent>
      <CardActions className={classes.actions}>
        <Button 
          color="primary"
          type="submit" 
          variant="contained"
          onClick={() => handleSubmit(onSubmit)()}
        >
          Simular
        </Button>
      </CardActions>
    </Card>
  );
};

export default SimulatorFormPoc;