Untitled

import {
  ActionSheet,
  ActionSheetContent,
  ActionSheetTrigger,
} from '@components/molecules/ActionSheet';
import { Image } from '@atoms/Image';
import { Container } from '@atoms/Container/Container';
import { Card } from '@components/molecules/Card';
import { Color } from '@molecules/Color';
import { Text } from '@atoms/Text';
import { Select } from '@molecules/Select';
import { useBasket } from '@modules/basket/scripts/hooks';
import { useTranslations } from '@modules/app-wrapper/scripts/contexts/translations.context';
import { Link } from '@components/atoms/Link';
import { useRouter } from 'next/router';
import { Icon } from '@components/atoms/Icon';
import { IconName } from '@functional/DynamicIconsMap';

/**
 * @TODO:
 * Currently the getBasket api does not return all product data that is needed.
 * Custom HitTile endpoint is being developed and should be used to retrieve the missing data once ready.
 */
const CardBody = (productItem: TBasketProductItem) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <Text type="labelMedium" css={{ color: '$red' }}>
      Only 1 item left
    </Text>
    <Link linkUrl={`/product/${productItem.productId}`}>
      <Text color={'black'} as={'h4'} type="h4">
        {productItem.productName}
      </Text>
    </Link>
    <Container display="flex" alignItems="center">
      <Color
        color="#000"
        label="Black"
        css={{ color: '$blackGrey', padding: '$xs 0' }}
      />
      <Text css={{ marginLeft: '$m' }} color="blackGrey" type="labelSmall">
        Size Small
      </Text>
    </Container>
    <Select
      id="quantity"
      placeholder="quantity"
      options={[
        { id: '1', label: 'Quantity 1' },
        { id: '2', label: 'Quantity 2' },
      ]}
      variant={'secondary'}
    />
  </div>
);

/**
 * @TODO:
 * Currently the getBasket api does not return all product data that is needed.
 * Custom HitTile endpoint is being developed and should be used to retrieve the missing data once ready.
 */
export const MiniCart = () => {
  const { data, isLoading, error } = useBasket();
  const { locale } = useRouter();
  const { t } = useTranslations();

  return (
    <ActionSheet>
      <ActionSheetTrigger>
        <Icon iconName={IconName.ShoppingBag} />
      </ActionSheetTrigger>
      <ActionSheetContent
        title={t(
          'minicart.title',
          data?.basket?.productItems?.length.toString() || '0'
        )}
      >
        {data?.basket?.productItems?.map((productItem) => (
          <div>
            <CardBody {...productItem} />
            <Card
              key={productItem.productId}
              align="center"
              assets={
                <Link linkUrl={`/product/${productItem.productId}`}>
                  <Image
                    alt="Test"
                    src="https://amq-sandbox.getbynder.com/m/637f569672ccdaa4/webimage-TheSlash-WhiteBag.png"
                  />
                </Link>
              }
              dir="horizontal"
              main={<CardBody {...productItem} />}
              actions={
                <div style={{ display: 'flex', gap: 16 }}>
                  <Text type="labelSmall">Remove</Text>
                </div>
              }
              price={
                <Text type="labelSmall">
                  {productItem.price?.toLocaleString(locale, {
                    currency: data.basket?.currency,
                    style: 'currency',
                  })}
                </Text>
              }
              ratio="portrait"
            />
          </div>
        ))}
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </ActionSheetContent>
    </ActionSheet>
  );
};