import React, { useMemo } from 'react';
import { filterVariantProps, flag } from '@trail-ui/theme';
import {
  CheckCircleIcon,
  CloseIcon,
  ErrorIcon,
  InfoIcon,
  SettingsIcon,
  WarningIcon,
} from '@trail-ui/icons';
import { Button, IconButton } from '../button';

export interface FlagProps {
  title: string;
  desc: string;
  variant: 'default' | 'success' | 'warning' | 'error' | 'info';
  hasActionBtn?: boolean;
  actionBtnText?: string;
  onActionClick?: () => void;
  isClosable?: boolean;
  onClose?: () => void;
}

function Flag(props: FlagProps) {
  let flagIcon;
  const { title, desc, variant, hasActionBtn, actionBtnText, isClosable, onActionClick, onClose } =
    props;
  const variantProps = filterVariantProps(props, flag.variantKeys);

  const styles = useMemo(
    () =>
      flag({
        ...variantProps,
        variant,
      }),
    [variantProps, variant],
  );

  switch (variant) {
    case 'default':
      flagIcon = <SettingsIcon height={24} width={24} />;
      break;
    case 'success':
      flagIcon = <CheckCircleIcon height={24} width={24} />;
      break;
    case 'error':
      flagIcon = <ErrorIcon height={24} width={24} />;
      break;
    case 'warning':
      flagIcon = <WarningIcon height={24} width={24} />;
      break;
    case 'info':
      flagIcon = <InfoIcon height={24} width={24} />;
      break;
    default:
      break;
  }

  return (
    <>
      <div className="shadow-medium flex w-full gap-1.5 rounded text-base">
        <div className={`${styles} flex w-12 min-w-12 items-center justify-center rounded-l`}>
          {flagIcon}
        </div>
        <div className="flex w-full items-center p-2">
          <div className="flex w-full flex-col">
            <p className="font-semibold text-neutral-900">{title}</p>
            <p className="text-sm font-normal text-neutral-700">{desc}</p>
          </div>
          {hasActionBtn && (
            <Button appearance="link" onPress={onActionClick}>
              {actionBtnText || 'Action'}
            </Button>
          )}
          {isClosable && (
            <IconButton
              spacing="compact"
              appearance="transparent"
              onPress={onClose}
              aria-label="Close"
              className="ml-auto h-auto p-2.5"
            >
              <CloseIcon height={24} width={24} className="text-neutral-600" />
            </IconButton>
          )}
        </div>
      </div>
    </>
  );
}

export { Flag };