import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Grow, Link, Stack, Typography, Box, Paper, styled } from '@mui/material';
import { joinURL } from 'ufo';

import { Button } from '@arcblock/ux';
import { usePaymentContext } from '../contexts/payment';

type Props = {
  mode: string;
  message: string;
  action: string;
  payee: string;
  invoiceId?: string;
  subscriptionId?: string;
  subscriptions?: any[];
};

export default function PaymentSuccess({
  mode,
  message,
  action,
  payee,
  invoiceId = '',
  subscriptionId = '',
  subscriptions = [],
}: Props) {
  const { t } = useLocaleContext();
  const { prefix } = usePaymentContext();
  let next: any = null;
  if (['subscription', 'setup'].includes(action)) {
    if (subscriptions && subscriptions.length > 1) {
      next = (
        <Paper
          elevation={0}
          sx={{
            p: 3,
            backgroundColor: 'grey.50',
            borderRadius: 2,
            width: '100%',
            mt: 2,
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
          }}>
          {subscriptions.map((subscription) => (
            <Box
              key={subscription.id}
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
              }}>
              <Typography
                variant="body2"
                sx={{
                  color: 'text.secondary',
                  fontWeight: 500,
                }}>
                {subscription.description}
              </Typography>
              <Box
                sx={{
                  flex: 1,
                  borderBottom: '1px dashed',
                  borderColor: 'grey.300',
                  mx: 2,
                }}
              />
              <Button variant="text" color="primary" size="small">
                <Link
                  href={joinURL(prefix, `/customer/subscription/${subscription.id}`)}
                  sx={{ color: 'text.secondary' }}>
                  {t('payment.checkout.next.view')}
                </Link>
              </Button>
            </Box>
          ))}
        </Paper>
      );
    } else if (subscriptionId) {
      next = (
        <Button variant="outlined" color="primary" sx={{ mt: 2 }}>
          <Link href={joinURL(prefix, `/customer/subscription/${subscriptionId}`)}>
            {t('payment.checkout.next.subscription', { payee })}
          </Link>
        </Button>
      );
    }
  } else if (invoiceId) {
    next = (
      <Typography
        sx={{
          textAlign: 'center',
          mt: 2,
        }}>
        <Link href={joinURL(prefix, `/customer/invoice/${invoiceId}`)}>
          {t('payment.checkout.next.invoice', { payee })}
        </Link>
      </Typography>
    );
  }

  return (
    <Grow in>
      <Stack
        direction="column"
        sx={{
          alignItems: 'center',
          justifyContent: mode === 'standalone' ? 'center' : 'flex-start',
          height: mode === 'standalone' ? 'fit-content' : 300,
        }}>
        <Div>
          <div className="check-icon">
            <span className="icon-line line-tip" />
            <span className="icon-line line-long" />
            <div className="icon-circle" />
            <div className="icon-fix" />
          </div>
        </Div>
        <Typography
          variant="h5"
          sx={{
            color: 'text.primary',
            mb: 3,
          }}>
          {message}
        </Typography>
        <Typography
          variant="body1"
          sx={{
            color: 'text.secondary',
            textAlign: 'center',
            fontSize: '14px',
          }}>
          {t('payment.checkout.completed.tip', { payee })}
        </Typography>
        {next}
      </Stack>
    </Grow>
  );
}

const Div = styled('div')`
  width: 80px;
  height: 115px;

  .check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid ${(props) => props.theme.palette.success.main};
  }
  .check-icon::before {
    top: 3px;
    left: -2px;
    width: 30px;
    transform-origin: 100% 50%;
    border-radius: 100px 0 0 100px;
  }
  .check-icon::after {
    top: 0;
    left: 30px;
    width: 60px;
    transform-origin: 0 50%;
    border-radius: 0 100px 100px 0;
    animation: rotate-circle 4.25s ease-in;
  }
  .check-icon::before,
  .check-icon::after {
    content: '';
    height: 100px;
    position: absolute;
    background: ${(props) => props.theme.palette.background.paper};
    transform: rotate(-45deg);
  }
  .check-icon .icon-line {
    height: 5px;
    background-color: ${(props) => props.theme.palette.success.main};
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
  }
  .check-icon .icon-line.line-tip {
    top: 46px;
    left: 14px;
    width: 25px;
    transform: rotate(45deg);
    animation: icon-line-tip 0.75s;
  }
  .check-icon .icon-line.line-long {
    top: 38px;
    right: 8px;
    width: 47px;
    transform: rotate(-45deg);
    animation: icon-line-long 0.75s;
  }
  .check-icon .icon-circle {
    top: -4px;
    left: -4px;
    z-index: 10;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 4px solid rgba(76, 175, 80, 0.5);
  }
  .check-icon .icon-fix {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: ${(props) => props.theme.palette.background.paper};
  }

  @keyframes rotate-circle {
    0% {
      transform: rotate(-45deg);
    }
    5% {
      transform: rotate(-45deg);
    }
    12% {
      transform: rotate(-405deg);
    }
    100% {
      transform: rotate(-405deg);
    }
  }
  @keyframes icon-line-tip {
    0% {
      width: 0;
      left: 1px;
      top: 19px;
    }
    54% {
      width: 0;
      left: 1px;
      top: 19px;
    }
    70% {
      width: 50px;
      left: -8px;
      top: 37px;
    }
    84% {
      width: 17px;
      left: 21px;
      top: 48px;
    }
    100% {
      width: 25px;
      left: 14px;
      top: 45px;
    }
  }
  @keyframes icon-line-long {
    0% {
      width: 0;
      right: 46px;
      top: 54px;
    }
    65% {
      width: 0;
      right: 46px;
      top: 54px;
    }
    84% {
      width: 55px;
      right: 0px;
      top: 35px;
    }
    100% {
      width: 47px;
      right: 8px;
      top: 38px;
    }
  }
`;