import { useState } from 'react';

import type { Icon } from '~/src/components/Icon/toIcon';
import type { NotificationProps } from '~/src/components/Notification';
import type { ReactNode } from 'react';

import Box from '~/src/components/Box';
import Clickable from '~/src/components/Clickable';
import Notification from '~/src/components/Notification';
import Text from '~/src/components/Text';

interface BannerAction {
  label: string;
  Icon: Icon;
  onClick: () => void;
}

interface ActionableBannerProps extends Omit<NotificationProps, 'content'> {
  message: ReactNode;
  height: string;
  action?: BannerAction;
}

/**
 * A banner that can be used to display important information and an optional action.
 * It can be dismissed by the user, and will not reappear until the component is unmounted and remounted.
 */
export const ActionableBanner = ({
  testId,
  message,
  height,
  action,

  ...notificationProps
}: ActionableBannerProps) => {
  const [isVisible, setIsVisible] = useState(true);

  if (!isVisible) return null;

  const content = (
    <Box flexRow alignCenter gap="1rem">
      <Text color="#fff" size="1.4rem" lineClamp={2} style={{ flex: 1 }}>
        {message}
      </Text>
      {action && (
        <Clickable
          isInline
          flexRow
          alignCenter
          gap="0.8rem"
          onClick={action.onClick}
        >
          <action.Icon />
          <Text bold padding="1rem 0" size="1.7rem">
            {action.label}
          </Text>
        </Clickable>
      )}
    </Box>
  );

  return (
    <Box testId={testId} height={height} pointerEvents="all" flexRow>
      <Notification
        style={{ flex: 1 }}
        content={content}
        onDismiss={() => setIsVisible(false)}
        {...notificationProps}
      />
    </Box>
  );
};