AutoPreenchimento.tsx

import React, { useCallback, useRef } from 'react';
import { Form } from '@unform/web';
import LocalShippingOutlinedIcon from '@material-ui/icons/LocalShippingOutlined';

import TextField from '../TextField';
import { Mask } from '../TextField/types';
import Autocomplete from '../Autocomplete';
import SimpleSelect from '../SimpleSelect';

import {
  Container,
  DeliveryTitle,
  ZipCode,
  Address,
  Number,
  Complement,
  District,
  City,
  State,
  Itinerary,
  Observations,
} from './styles';

const Delivery: React.FC = () => {
  // const [isValidZipCode, setIsValidZipCode] = useState(false);
  // const [isOneZipCode, setIsOneZipCode] = useState(false);

  const formRef = useRef(null);

  function onBlurCep(event: any): void {
    const { value } = event.target;

    const formattedCep = value?.replace(/[^0-9]/, '');

    if (formattedCep?.length !== 8) {
      return;
    }

    fetch('api/buscaCep')
      .then(res => res.json())
      .then(data => console.log(data));
  }

  function handleSubmit(data: Record<string, unknown>): void {
    return console.log(data);
  }

  return (
    <Container>
      <DeliveryTitle className="deliveryTitle">
        <LocalShippingOutlinedIcon />
        <span>Dados de entrega</span>
      </DeliveryTitle>
      <hr />
      <Form onSubmit={handleSubmit}>
        <ZipCode>
          <TextField
            label="CEP"
            name="zip"
            variationStyle="outlined"
            mask={Mask.cep}
            length={9}
            onBlur={event => onBlurCep(event)}
          />
          <a
            href="https://buscacepinter.correios.com.br/app/endereco/index.php?t"
            target="_blank"
            rel="noreferrer"
          >
            Não sabe o CEP?
          </a>
        </ZipCode>
        <div className="zipCode">
          <Address>
            <TextField
              label="Logradouro"
              name="address"
              variationStyle="outlined"
              mask={Mask.none}
              length={20}
            />
          </Address>
          <Number>
            <TextField
              label="Número"
              name="number"
              variationStyle="outlined"
              mask={Mask.onlyNumber}
              length={5}
            />
          </Number>
        </div>
        <div className="complement">
          <Complement>
            <TextField
              label="Complemento"
              name="complement"
              variationStyle="outlined"
              mask={Mask.none}
              length={20}
            />
            <span className="optional">opcional</span>
          </Complement>
          <District>
            <TextField
              label="Bairro"
              name="district"
              variationStyle="outlined"
              mask={Mask.none}
              length={20}
            />
          </District>
        </div>
        <div className="complement">
          <City>
            <TextField
              label="Cidade"
              name="city"
              variationStyle="outlined"
              mask={Mask.none}
              length={20}
            />
          </City>
          <State>
            <SimpleSelect
              id="estado"
              name="estado"
              placeholder="Selecione"
              label="Estado"
              disabled={false}
              options={[
                { value: 'Acre', valueLabel: 'AC' },
                { value: 'Alagoas', valueLabel: 'AL' },
                { value: 'Amapá', valueLabel: 'AP' },
                { value: 'Amazonas', valueLabel: 'AM' },
                { value: 'Bahia', valueLabel: 'BA' },
                { value: 'Ceará', valueLabel: 'CE' },
                { value: 'Distrito Federal', valueLabel: 'DF' },
                { value: 'Espírito Santo', valueLabel: 'ES' },
                { value: 'Goiás', valueLabel: 'GO' },
                { value: 'Maranhão', valueLabel: 'MA' },
                { value: 'Mato Grosso', valueLabel: 'MT' },
                { value: 'Mato Grosso do Sul', valueLabel: 'MS' },
                { value: 'Minas Gerais', valueLabel: 'MG' },
                { value: 'Pará', valueLabel: 'PA' },
                { value: 'Paraíba', valueLabel: 'PB' },
                { value: 'Paraná', valueLabel: 'PR' },
                { value: 'Pernambuco', valueLabel: 'PE' },
                { value: 'Piauí', valueLabel: 'PI' },
                { value: 'Rio de Janeiro', valueLabel: 'RJ' },
                { value: 'Rio Grande do Norte', valueLabel: 'RN' },
                { value: 'Rio Grande do Sul', valueLabel: 'RS' },
                { value: 'Rondônia', valueLabel: 'RO' },
                { value: 'Roraima', valueLabel: 'RR' },
                { value: 'Santa Catarina', valueLabel: 'SC' },
                { value: 'São Paulo', valueLabel: 'SP' },
                { value: 'Sergipe', valueLabel: 'SE' },
                { value: 'Tocantins', valueLabel: 'TO' },
              ]}
            />
          </State>
        </div>
        <Itinerary>
          <Autocomplete
            label="País"
            name="country"
            id="country"
            placeholder="Nome do País"
            noOptionText="Nenhum país localizado"
            asyncOptionsRequest={async value => {
              try {
                const response = await fetch(
                  `https://603649d6c3d42700172e6890.mockapi.io/user/?name=${value}`,
                );
                const selectOptions = await response.json();
                return selectOptions.map((item: any) => ({
                  value: item.id,
                  text: item.name,
                }));
              } catch {
                return [];
              }
            }}
          />
        </Itinerary>
        <Observations>
          <TextField
            label="Observações"
            name="observations"
            multiline
            mask={Mask.none}
            length={3000}
            variationStyle="outlined"
          />
          <span className="optional">opcional</span>
        </Observations>
      </Form>
    </Container>
  );
};

export default Delivery;