import React from 'react';
import { useRegionalizationContext } from '../context/RegionalizationContext';
import { Title } from '../components/Title';
import { SetViewButton } from '../components/SetView';
import { Arrow } from '../assets/Icons/Arrow';
import { WarningIncon } from '../assets/Icons/WarningIcon';
import { InfoPrices } from '../components/InfoPrices';
import { postalCodeMask } from '../utils/postalCode';

export const PostalCodeInputScreen = () => {
  const {
    titleText,
    moreInfosText,
    delivery,
    status,
    postalCodeValidation,
    setInputPostalCode,
    pickup,
    postalCode,
    deliveryPrice,
  } = useRegionalizationContext();

  return (
    <>
      <Title title={titleText} />

      <SetViewButton view="MoreInfosScreen" className="more-infos-button">
        {moreInfosText}
        <span>
          <Arrow />
        </span>
      </SetViewButton>

      <div className="delivery-pickup-container">
        <div className="content-container">
          {status?.status !== 'failed' ? (
            <h2>{delivery?.title}</h2>
          ) : (
            <>
              <h2>Tente outro CEP</h2>

              <div className="warning-container">
                <WarningIncon />
                <span className="warning-text">{status?.message}</span>
              </div>
            </>
          )}

          <InfoPrices
            containerClassName="delivery-container"
            priceClassName="info-price"
            labelPrice={delivery?.labelPrice}
            price={deliveryPrice}
            labelScheduling={delivery?.labelScheduling}
            scheduling={delivery?.scheduling}
          />

          <div className="postal-code-container">
            <input
              onKeyDown={(event) =>
                event.key === 'Enter' && postalCodeValidation?.()
              }
              type="text"
              onChange={(e) => setInputPostalCode(e.target.value)}
              maxLength={9}
              placeholder={postalCode ?? '00000-000'}
              onKeyUp={postalCodeMask}
            />
            <button
              onKeyDown={(event) =>
                event.key === 'Enter' && postalCodeValidation?.()
              }
              onClick={() => postalCodeValidation?.()}
              disabled={status?.loading}
            >
              {status?.loading ? status.message : delivery?.searchButton}
            </button>
          </div>

          <a href={delivery?.linkHref} target="_blank">
            {delivery?.linkText}
          </a>
        </div>

        <div className="content-container">
          <h2>{pickup?.title}</h2>

          <InfoPrices
            containerClassName="pickup-container"
            priceClassName="pickup-price"
            labelPrice={pickup?.labelPrice}
            price={pickup?.price}
            labelScheduling={pickup?.labelScheduling}
            scheduling={pickup?.scheduling}
          />

          <div className="pickup-open-stores-container">
            <SetViewButton
              view="AllStoresScreen"
              className="pickup-open-stores"
            >
              {pickup?.buttonOpenStores}
            </SetViewButton>
          </div>
        </div>
      </div>
    </>
  );
};