import { observer } from 'mobx-react';
import {
  ApphouseFormV2,
  ApphouseFormV2Styles
} from '../components/Form/ApphouseFormV2';
import { Popup } from '../components/popup/Popup';
import { ApphouseComponent } from '../components/component.interfaces';
import { PopupStyles } from '../components/popup/Popup.interface';
import React from 'react';
import { FormV2 } from '../models/Form/FormV2';

interface PromptFilenameStyles {
  popup?: PopupStyles;
  form?: ApphouseFormV2Styles;
}

export interface PromptFilenameProps
  extends ApphouseComponent<PromptFilenameStyles> {
  /**
   * The title of the prompt
   * @default 'Save as'
   */
  title?: string;
  /**
   * The callback function to be executed when the user confirms the prompt
   * @param filename
   * @returns
   */
  onConfirm: (filename: string) => void;
}

/**
 * A prompt that will ask the user to enter a file name
 */
export const PromptFilename: React.FC<PromptFilenameProps> = observer(
  (props: PromptFilenameProps) => {
    const { onConfirm, title, styleOverwrites, gutters } = props;

    const onSubmission = (formData: { filename: string }) => {
      onConfirm(formData.filename);
    };
    return (
      <Popup
        id="PromptFilenamePopup"
        title={title || 'Save as'}
        closeOnClickOutside
        hideFooterActions
        showCloseButton
        width="320px"
        styleOverwrites={styleOverwrites?.popup}
        gutters={gutters}
      >
        <ApphouseFormV2
          form={
            new FormV2({
              id: 'PromptFilenameForm',
              fields: [
                {
                  id: 'filename',
                  type: 'text',
                  value: '',
                  input: {
                    label: 'Name',
                    required: true,
                    styleOverwrites: {
                      container: {
                        width: '100%'
                      },
                      input: {
                        width: '100%'
                      }
                    }
                  }
                }
              ]
            })
          }
          submitButtonLabel="Save"
          onSubmit={onSubmission as any}
          styleOverwrites={styleOverwrites?.form}
        />
      </Popup>
    );
  }
);