import React from 'react';
import { Box, Icon, Text } from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import Cart from 'store/cart';
import { useMobileCartQuery } from 'typings/graphql';
import { formatPrice } from 'utils/helpers';

type NowAndLaterDisplayProps = {
  cart?: Cart;
};

const NowAndLaterDisplay = ({ cart }: NowAndLaterDisplayProps) => {
  const cartId = cart?.activeCartId;
  const { data, loading } = useMobileCartQuery({
    variables: { input: { cartId: cartId ?? '' } },
    skip: !cartId,
  });

  if (!cartId || loading) return null;
  return (
    <Box
      position="fixed"
      bottom={1}
      right={0}
      paddingY={{ sm: 0, md: 2 }}
      paddingX={{ sm: 0, md: 4 }}
      width={{ sm: '100%', lg: '50%' }}
      style={{
        backdropFilter: 'blur(8px)',
        backgroundColor: 'rgb(255 255 255 / 60%)',
      }}
    >
      <Box display="flex" flexDirection="row" gap={1} alignItems="center" justifyContent="flex-end">
        <Box
          display="flex"
          flexDirection="row"
          justifyContent="flex-end"
          paddingX={{ sm: 4, md: 10 }}
          paddingY={1}
          gap={2}
        >
          {!!data?.cart?.totalDue && (
            <Text variant="pSmallBold" color="black100">
              {`Alls ${formatPrice(data?.cart?.totalDue)} til greiðslu núna`}
            </Text>
          )}
          {!!data?.cart?.totalMonthlyCharge && (
            <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
              <Icon color="grey800" icon="refresh" size={16} />
              <Text
                color={{ sm: 'grey800', md: 'grey400' }}
                variant="pSmallRegular"
              >{`${formatPrice(data.cart.totalMonthlyCharge)} endurnýjast mánaðarlega`}</Text>
            </Box>
          )}
        </Box>
      </Box>
    </Box>
  );
};

export default inject('cart')(observer(NowAndLaterDisplay));