import { useLocation, useNavigate } from 'react-router';
import { PATHS as HOMEPAGE } from 'pages/root/HomePage';

import { useModal } from 'components/layers';

import { Box, Button, Heading } from 'components/common';
import { ExternalLink } from 'components/router/ExternalLink';
import {
  PackageInformation,
  PackageInformationProps,
} from 'components/billing/PackageInformation';
import {
  CancelChangeModal,
  CancelSubscriptionModal,
} from 'components/billing/CancelSubscriptionModal';

interface CurrentPackageProps {
  data: PackageInformationProps['data'][];
}

export const CurrentPackage = ({ data }: CurrentPackageProps) => {
  const navigate = useNavigate();
  const location = useLocation();

  const cancelSubscriptionModal = useModal(CancelSubscriptionModal, {
    defaultProps: { hasScheduledChange: data.length > 1 },
  });
  const cancelChangeModal = useModal(CancelChangeModal);

  return (
    <Box spacingY={5}>
      <Box display="flex" align="center" justify="between">
        <Heading>Subscription plan</Heading>
        <Button
          onClick={() =>
            navigate(`/${HOMEPAGE.subscribe}`, {
              state: {
                path: location.pathname,
                name: 'Billing screen',
              },
            })
          }
          size="m"
        >
          Change plan
        </Button>
      </Box>

      <Box spacingY={2}>
        {data.map((pkg, i) => {
          const onCancel =
            i === 0
              ? () => cancelSubscriptionModal.show({ name: pkg.name })
              : () => cancelChangeModal.show({ name: pkg.name });
          return (
            <PackageInformation
              data={pkg}
              hasScheduledChange={data.length > 1}
              scheduled={i !== 0}
              onCancel={onCancel}
              key={i}
            />
          );
        })}
      </Box>

      <Box className="flex alignCenter justifyBetween">
        <ExternalLink
          className="link fz14"
          href="https://fansifter.com/pricing"
        >
          Learn more about plans on the pricing page
        </ExternalLink>
      </Box>
    </Box>
  );
};