import React, { useState } from 'react';
import { SilkeButton, SilkeButtonKind } from '../silke-button';
import { SilkeIcons } from '../silke-icon';
import { SilkeModal, SilkeModalActions, SilkeModalContent, SilkeModalProps } from './silke-modal';
import { SilkeTextField } from '../silke-text-field';
import { SilkeBox } from '../silke-box';

export type SilkeConfirmationModalProps = {
  title?: string;
  /**
   * Label on confirm button
   */
  confirmLabel: string;
  /**
   * Confirmation button kind
   * @default primary
   */
  confirmKind?: SilkeButtonKind;
  confirmIcon?: SilkeIcons;
  /**
   * Label on reject button
   * @default Cancel
   */
  rejectLabel?: string;
  onConfirm: () => void;
  isSubmitting?: boolean;

  /** On click of cancel button, will fallback to onClose if not defined */
  onCancel?: () => void;
  /**
   * If set, the Confirm button will be disabled until the safeWord is entered
   */
  safeWord?: string;
} & SilkeModalProps;

export function SilkeConfirmationModal({
  children,
  confirmIcon,
  confirmKind = 'primary',
  confirmLabel,
  isSubmitting,
  onCancel,
  onConfirm,
  rejectLabel = 'Cancel',
  safeWord,
  ...rest
}: SilkeConfirmationModalProps) {
  const [text, setText] = useState<string>();

  return (
    <SilkeModal size="small" {...rest}>
      <SilkeModalContent>
        {children}

        {safeWord && (
          <SilkeBox style={{ marginTop: 15 }}>
            <SilkeTextField
              label={`Enter "${safeWord}" to confirm`}
              onChange={setText}
              value={text}
            />
          </SilkeBox>
        )}
      </SilkeModalContent>
      <SilkeModalActions>
        <SilkeButton
          disabled={isSubmitting}
          kind="ghost"
          label={rejectLabel}
          size="base"
          onClick={onCancel || rest.onClose}
        />

        <SilkeButton
          disabled={!!safeWord && text !== safeWord}
          icon={confirmIcon}
          kind={confirmKind}
          label={confirmLabel || 'Confirm'}
          size="base"
          loading={isSubmitting}
          onClick={onConfirm}
        />
      </SilkeModalActions>
    </SilkeModal>
  );
}