import type { TPaymentCurrency } from '@blocklet/payment-types';
import { Avatar, Card, Radio, Stack, Typography } from '@mui/material';
import { styled } from '@mui/system';

type Props = {
  value: string;
  currencies: TPaymentCurrency[];
  onChange: Function;
};

export default function CurrencySelector({ value, currencies, onChange }: Props) {
  return (
    <Root
      className="cko-currency-selector"
      count={currencies.length}
      style={{
        display: currencies.length > 1 ? 'grid' : 'block',
        width: '100%',
        gap: 12,
        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
      }}>
      {currencies.map((x) => {
        const selected = x.id === value;
        return (
          <Card
            key={x.id}
            variant="outlined"
            onClick={() => onChange(x.id, (x as any).method?.id)}
            className={selected ? 'cko-payment-card' : 'cko-payment-card-unselect'}>
            <Stack
              direction="row"
              sx={{
                alignItems: 'center',
                position: 'relative',
              }}>
              <Avatar src={x.logo} alt={x.name} sx={{ width: 40, height: 40, marginRight: '12px' }} />
              <div>
                <Typography
                  variant="h5"
                  component="div"
                  sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
                  {x.symbol}
                </Typography>
                <Typography
                  gutterBottom
                  sx={{
                    color: 'text.lighter',
                    fontSize: 14,
                  }}>
                  {(x as any).method.name}
                </Typography>
              </div>
              <Radio
                checked={selected}
                sx={{
                  position: 'absolute',
                  right: 0,
                }}
              />
            </Stack>
          </Card>
        );
      })}
    </Root>
  );
}

const Root = styled<any>('section')`
  .cko-payment-card {
    position: relative;
    border: 1px solid;
    border-color: ${({ theme }) => theme.palette.primary.main};
    padding: 4px 8px;
    cursor: pointer;
    background: ${({ theme }) => theme.palette.grey[50]};
  }

  .cko-payment-card-unselect {
    border: 1px solid;
    border-color: ${({ theme }) => theme.palette.grey[100]};
    padding: 4px 8px;
    cursor: pointer;
    background: ${({ theme }) => theme.palette.grey[50]};
  }
`;