import { format, parseISO } from 'date-fns';
import React from 'react';

import { ButtonShape, ButtonVariant } from '@/components/button/Button';

import { ModalButton } from '../../shared/ModalButton';

type Props = {
  applyImmediately: boolean;
  previewPeriodEnd?: string | null;
  setApplyImmediately: (value: boolean) => void;
  onContinue: () => void;
  canUpgradeImmediately?: boolean;
};

const SelectStep: React.FC<Props> = ({
  applyImmediately,
  previewPeriodEnd,
  setApplyImmediately,
  onContinue,
  canUpgradeImmediately = true,
}) => (
  <div className='flex flex-col'>
    <p className='mb-4 text-white/80'>Choose your timeframe</p>

    <div className='mb-6 flex flex-col gap-2'>
      <ModalButton
        shape={ButtonShape.Rounded}
        variant={
          applyImmediately ? ButtonVariant.Primary : ButtonVariant.Secondary
        }
        onClick={() => setApplyImmediately(true)}
        disabled={!canUpgradeImmediately}
      >
        Immediately with proration
        {!canUpgradeImmediately && ' (Not available for your payment method)'}
      </ModalButton>

      <ModalButton
        shape={ButtonShape.Rounded}
        variant={
          applyImmediately ? ButtonVariant.Secondary : ButtonVariant.Primary
        }
        onClick={() => setApplyImmediately(false)}
      >
        At the end of the current billing period, on{' '}
        {previewPeriodEnd
          ? format(parseISO(previewPeriodEnd), 'MMM d, y')
          : null}
      </ModalButton>
    </div>

    <div className='mt-2 flex justify-center gap-3'>
      <ModalButton variant={ButtonVariant.Primary} onClick={onContinue}>
        Continue
      </ModalButton>
    </div>
  </div>
);

export default SelectStep;