import { useConfirmationState } from 'hooks/useConfirmationState';

import { Box, Button, Spinner, Text } from 'components/common';
import { ModalContainer } from 'components/modals';

import { getConfirmedIds } from '.';

// const DICT = {
//   AllianceSourceDeletedConsequence: 'collection',
//   AllianceSegmentDeletedConsequence: 'segment',
//   AudienceDeletedConsequence: 'audience',
//   AudienceUnsharedConsequence: 'audience',
//   WorkspaceSegmentDeletedConsequence: 'segment',
//   WorkspaceSourceDeletedConsequence: 'collection',
// };

interface ConfirmationListProps {
  items: {
    id: string;
    message: string;
    count: number;
  }[];
  state: string[];
  onConfirm: (id: string) => void;
}

export const ConfirmationList = ({
  items,
  state,
  onConfirm,
}: ConfirmationListProps) => {
  return (
    <Box className="fz14" spacingY={2}>
      {items?.map((warning) => {
        return (
          <div key={warning.id}>
            <label className="spacing2">
              <input
                type="checkbox"
                checked={state.indexOf(warning.id) !== -1}
                onChange={() => onConfirm(warning.id)}
              />
              <span>{warning.message}</span>
            </label>{' '}
            <span className="c-blue nowrap">
              ({warning.count}){/* {DICT[warning.type]} */}
            </span>
          </div>
        );
      })}
    </Box>
  );
};

interface DeleteConfirmationModalProps {
  title: string;
  message?: React.ReactNode;
  confirm?: {
    id: string;
    message: string;
    count: number;
    items: string[];
  }[];
  initialState?: string[];
  submitting: boolean;
  loading: boolean;
  error?: any;
  cancelProps?: React.ComponentProps<typeof Button>; //Button props
  cancelButton?: string;
  submitProps?: React.ComponentProps<typeof Button>; //Button props
  submitButton?: string;
  onSubmit: (confirmed: string[]) => void;
  onDismiss?: () => void;
}

export const DeleteConfirmationModal = ({
  title,
  message,
  confirm = [],
  initialState = [],
  submitting,
  loading,
  error,
  cancelProps,
  cancelButton = 'Cancel',
  submitProps,
  submitButton = 'Delete',
  onSubmit,
  onDismiss,
}: DeleteConfirmationModalProps) => {
  const [confirmed, handleConfirm] = useConfirmationState(initialState);

  const isConfirmed = confirmed.length === confirm?.length;

  const handleSubmit = () => onSubmit(getConfirmedIds(confirm));

  return (
    <ModalContainer title={title}>
      <Box position="relative" marginY={4} spacingY={4}>
        {message && <Text size="s">{message}</Text>}
        {confirm?.length !== 0 && (
          <ConfirmationList
            items={confirm}
            state={confirmed}
            onConfirm={handleConfirm}
          />
        )}
        <Spinner show={loading} />
      </Box>
      <Box display="flex" marginY={4} spacing={2}>
        <Button
          onClick={onDismiss}
          color="gray"
          block
          disabled={submitting}
          {...cancelProps}
        >
          {cancelButton}
        </Button>

        <Button
          onClick={handleSubmit}
          color="red"
          block
          autoFocus
          disabled={loading || submitting || !isConfirmed}
          {...submitProps}
        >
          {error ? 'Try again' : submitButton}
        </Button>
      </Box>
      {error && (
        <Text align="center" size="s">
          {error.message || 'Something went wrong'}
        </Text>
      )}
    </ModalContainer>
  );
};