text: import React, { useEffect, useState } from 'react';
  import styled from 'styled-components';
  import is from 'styled-is';
  import { useRouter } from 'next/router';
  
  import Layout from 'components/layout';
  import { useBasket } from 'components/basket';
  import OrderItems from 'components/order-items';
  import { H1, H3, Outer, Header } from 'ui';
  import { useT } from 'lib/i18n';
  import { skuToUrl } from '../../db/store';
  import BillingDetails from './billing-details';
  
  const CustomHeader = styled(Header)`
    margin-bottom: 0;
    padding-bottom: 0;
  `;
  
  const Line = styled.div`
    margin: 20px 0;
    border-bottom: 1px solid var(--color-main-background);
  `;
  
  const Totals = styled.div`
    margin: 10px 15px;
  `;
  
  const TotalLine = styled.div`
    text-align: right;
    margin-top: 5px;
  
    ${is('bold')`
      font-size: 1.2rem;
      font-weight: 600;
    `};
  `;
  
  export default function Confirmation({ order }) {
    const basket = useBasket();
    const t = useT();
    const router = useRouter();
    const [filePath, setFilePath] = useState('');
  
    useEffect(() => {
      if(order) {
        const cart = order.cart[0];
        if(cart) {
          const selectedSku = skuToUrl.filter(item => item.sku === cart['sku'])
          setFilePath(selectedSku[0].path);
        }
      }
    }, [order])
  
    // Empty the basket
    useEffect(() => {
      if (router.query) {
        if ('emptyBasket' in router.query) {
          basket.actions.empty();
  
          const url = new URL(location.href);
  
          url.searchParams.delete('emptyBasket');
  
          router.replace(
            {
              pathname: router.pathname,
              query: Object.fromEntries(url.searchParams)
            },
            url.pathname + url.search,
            { shallow: true }
          );
        }
      }
    });
  
    useEffect(() => {
      if (!order) {
        const t = setTimeout(() => window.location.reload(), 5000);
  
        return () => clearTimeout(t);
      }
    }, [order]);
  
    if (!order) {
      return <Layout loading />;
    }
  
    const cart = order.cart.map((item) => ({
      ...item,
      image: {
        url: item.imageUrl
      }
    }));
    const email = order.customer.addresses?.[0]?.email;
    const { total } = order;
  
    return (
      <Layout title={t('checkout.confirmation.title')}>
        <Outer>
          <CustomHeader>
            <H1>{t('checkout.confirmation.title')}</H1>
            <p>
              {t('checkout.confirmation.shortStatus', {
                context: email ? 'withEmail' : null,
                email
              })}
            </p>
            <Line />
            <BillingDetails order={order} />
            <Line />
            <H3>{t('order.item', { count: cart.length })}</H3>
            <OrderItems cart={cart} />
            <Totals>
              <TotalLine bold>
                {t('order.total')}:{' '}
                {t('common.price', {
                  value: total.gross,
                  currency: total.currency
                })}
              </TotalLine>
              <TotalLine>
                {t('common.tax', {
                  value: total.gross - total.net,
                  currency: total.currency
                })}
              </TotalLine>
            </Totals>
            {filePath && <a href={filePath} download>DOWNLOAD FILE</a>}
          </CustomHeader>
        </Outer>
      </Layout>
    );
  }
  