'use client';

import { ChangeEventHandler, useId, useState } from 'react';

import ConfirmationModal, {
  ConfirmationModalProps,
} from '@/components/modal/ConfirmationModal';
import TextArea from '@/components/input/TextArea';

import { Color } from '@/types/theme';

interface ConfirmationModalWithNotesProps
  extends Omit<ConfirmationModalProps, 'children' | 'primaryButton'> {
  rows?: number;
  placeholder?: string;

  primaryButton?: {
    text?: string;
    color?: Color;
    isLoading?: boolean;
    onClick?: (notes: string) => void;
  };
}

const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
  ref,
  type = 'info',
  text,
  closeOnBackdrop,
  primaryButton,
  secondaryButton,
  className,
  rows = 3,
  placeholder = 'Catatan...',
}) => {
  const randomId = useId();
  const [notes, setNotes] = useState('');

  const notesChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
    setNotes(e.target.value);
  };

  return (
    <ConfirmationModal
      ref={ref}
      type={type}
      text={text}
      closeOnBackdrop={closeOnBackdrop}
      primaryButton={{
        ...primaryButton,
        onClick: () => {
          primaryButton?.onClick?.(notes);
        },
      }}
      secondaryButton={secondaryButton}
      className={className}
    >
      <TextArea
        name={randomId}
        placeholder={placeholder}
        value={notes}
        onChange={notesChangeHandler}
        rows={rows}
      />
    </ConfirmationModal>
  );
};

export default ConfirmationModalWithNotes;