import React from 'react';
import { useRegionalizationContext } from '../context/RegionalizationContext';
import { Title } from '../components/Title';
import { SetViewButton } from '../components/SetView';
import { InfoPrices } from '../components/InfoPrices';
import { Navigation } from '../components/Navigation';

export const ConfirmScreen = () => {
  const {
    editAddress,
    delivery,
    pickup,
    address,
    pickupAddress,
    deliveryRequestInfos,
    internalMethod,
    pickupTimes,
    deliveryPrice,
  } = useRegionalizationContext();

  const deliveryEstimateText = `Entrega a partir de ${deliveryRequestInfos?.shippingEstimate
    ?.replaceAll('m', ' min')
    .replace('bd', ' dias')} ou agendada`;

  const pickupEstimateText = `Retiradas entre ${
    pickupTimes?.openingTime ?? '08'
  }h e ${pickupTimes?.closingTime ?? '20'}h, ou agendada`;

  return (
    <>
      <Title
        title={
          internalMethod === 'delivery' ? delivery?.titleOk : pickup?.titleOk
        }
      />

      <div className="address-container">
        <p className="address-title">
          <span>
            {internalMethod === 'delivery'
              ? delivery?.labelAddress
              : pickup?.labelAddress}
          </span>
          <SetViewButton view="PostalCodeInputScreen" className="edit-button">
            {editAddress}
          </SetViewButton>
        </p>

        {internalMethod === 'delivery' ? (
          <>
            <span>{address?.cep}</span>
            <span className="address-delivery">
              {address?.logradouro ?? address?.localidade}
            </span>
          </>
        ) : (
          <>
            <span>{pickupAddress?.name}</span>
            <p className="address-pickup">
              {pickupAddress?.address.street}, {pickupAddress?.address.number}
              <br />
              {pickupAddress?.address.neighborhood}
            </p>
          </>
        )}
      </div>

      {internalMethod === 'delivery' ? (
        <InfoPrices
          containerClassName="delivery-container"
          priceClassName="info-price"
          labelPrice={delivery?.labelPrice}
          price={deliveryPrice}
          scheduling={
            deliveryRequestInfos?.shippingEstimate
              ? deliveryEstimateText
              : delivery?.scheduling
          }
        />
      ) : (
        <InfoPrices
          containerClassName="pickup-container"
          priceClassName="pickup-price"
          labelPrice={pickup?.labelPrice}
          price={pickup?.price}
          scheduling={pickupEstimateText}
        />
      )}

      <Navigation />
    </>
  );
};