import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { useCommercialRightsPurchase } from '@/hooks/useCommercialRightsPurchase';
import { TicketIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';

interface CommercialRightsAvailablePanelProps {
  onDownload: () => void;
  onPurchaseRights: () => void;
  clipId?: string;
}

export const CommercialRightsAvailablePanel: React.FC<
  CommercialRightsAvailablePanelProps
> = ({ onDownload, onPurchaseRights, clipId }) => {
  const commercialRightsPurchase = useCommercialRightsPurchase();

  const handlePurchaseRights = () => {
    if (clipId) {
      logWebUserEvent({
        actionName: 'PurchaseCommercialRightsButtonClicked',
        context: {
          clipId,
        },
      });
      commercialRightsPurchase.mutate({ clipId });
    } else {
      onPurchaseRights();
    }
  };
  return (
    <>
      <div className='mb-6 flex justify-center'>
        <div className='flex h-16 w-16 items-center justify-center rounded-full bg-foreground-primary/10'>
          <TicketIcon className='h-8 w-8 text-foreground-primary' />
        </div>
      </div>

      <h2 className='mb-8 font-serif text-4xl font-light whitespace-pre text-foreground-primary'>
        Need commercial rights?
      </h2>

      <p className='mb-6 text-base leading-snug text-foreground-secondary'>
        Only <span className='font-bold'>Pro</span> and{' '}
        <span className='font-bold'>Premier</span> songs are eligible for
        commercial use. You created this song before subscribing.
      </p>

      <div className='mt-8 flex flex-col gap-3'>
        <Button
          shape={ButtonShape.Pill}
          size={ButtonSize.Medium}
          variant={ButtonVariant.Aura}
          onClick={handlePurchaseRights}
          disabled={commercialRightsPurchase.isPending}
          className='w-full text-lg font-medium'
        >
          {commercialRightsPurchase.isPending
            ? 'Processing...'
            : 'Buy Commercial Rights'}
        </Button>

        <Button
          shape={ButtonShape.Pill}
          size={ButtonSize.Medium}
          onClick={onDownload}
          className='w-full border border-border-primary bg-background-tertiary text-foreground-primary hover:enabled:bg-background-primary'
        >
          Download without commercial rights
        </Button>
      </div>
    </>
  );
};