import React from 'react';
import { useRegionalizationContext } from '../../context/RegionalizationContext';
import { Arrow } from '../../assets/Icons/Arrow';
import { SetViewButton } from '../SetView';
import { deliverySetData } from '../../utils/deliverySetData';
import { pickupSetData } from '../../utils/pickupSetData';

interface NavigationProps {
  moreInfosScreen?: boolean;
}

export const Navigation = ({ moreInfosScreen }: NavigationProps) => {
  const {
    confirmButton,
    textBackButton,
    delivery,
    pickup,
    pickupAddress,
    internalMethod,
    regionalizeCatalog,
    address,
    deliveryRequestInfos,
    postalCode,
    setMethod,
    setCity,
    setUf,
    setPickupName,
    setPickupTimes,
    pickupTimes,
    setInputPostalCode,
  } = useRegionalizationContext();

  return (
    <div className="container-navigation">
      <SetViewButton view="PostalCodeInputScreen" className="back-button">
        <span>
          <Arrow />
        </span>
        {textBackButton}
      </SetViewButton>

      <SetViewButton
        view="PostalCodeInputScreen"
        closeModal={!moreInfosScreen}
        className="continue-button"
        onClick={() => {
          setMethod?.(internalMethod);
          if (internalMethod === 'delivery') {
            deliverySetData(address, deliveryRequestInfos, postalCode);
            setCity?.(address?.localidade);
            setUf?.(address?.uf);
            regionalizeCatalog?.(postalCode);
          } else {
            setInputPostalCode(pickupAddress?.address?.postalCode || '');
            pickupSetData(pickupAddress, pickupTimes);
            setPickupName?.(pickupAddress?.name);
            setPickupTimes?.(pickupTimes);
            regionalizeCatalog?.(pickupAddress?.address.postalCode);
          }
        }}
      >
        {moreInfosScreen
          ? confirmButton
          : internalMethod === 'delivery'
          ? delivery?.confirmButton
          : pickup?.confirmButton}
      </SetViewButton>
    </div>
  );
};