import { useTheme } from '@arcblock/ux/lib/Theme';
import type { TCheckoutSessionExpanded } from '@blocklet/payment-types';
import { Avatar, Stack, Typography } from '@mui/material';
import { useCreation, useLocalStorageState, useSize } from 'ahooks';

import Livemode from '../components/livemode';
import { getStatementDescriptor } from '../libs/util';
import UserButtons from './form/addon';

type Props = {
  checkoutSession: TCheckoutSessionExpanded;
};

export default function PaymentHeader({ checkoutSession }: Props) {
  const [livemode] = useLocalStorageState('livemode', { defaultValue: true });
  const brand = getStatementDescriptor(checkoutSession.line_items);
  const theme = useTheme();

  const domSize = useSize(document.body);

  const isColumnLayout = useCreation(() => {
    if (domSize) {
      if (domSize?.width <= theme.breakpoints.values.md) {
        return true;
      }
    }
    return false;
  }, [domSize, theme]);

  return (
    <Stack
      className="cko-header"
      direction="row"
      spacing={1}
      sx={{
        alignItems: 'center',
        justifyContent: 'space-between',
      }}>
      <Stack
        direction="row"
        spacing={1}
        sx={{
          alignItems: 'center',
        }}>
        <Avatar
          variant="square"
          src={window.blocklet.appLogo}
          sx={{ width: 32, height: 32 }}
          alt={window.blocklet?.appName || 'Logo'}
        />
        <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{brand}</Typography>
        {!livemode && <Livemode />}
      </Stack>
      {isColumnLayout ? <UserButtons /> : null}
    </Stack>
  );
}