import React from 'react';
import { SilkeBox } from '../silke-box';
import { SilkeButton } from '../silke-button';
import { SilkeDivider } from '../silke-divider';
import { SilkeForm } from '../silke-form';
import { SilkeModal } from '../silke-modal';
import { SilkeTextField, TextFieldContext } from '../silke-text-field';

export type SilkeVariablesWrapperFormProps = {
  variableValue: string;
  containerRef?: React.RefObject<HTMLDivElement>;
  onSubmit: (form: { variableName: string }) => void;
  onClose: () => void;
};

export function SilkeVariablesWrapperForm(props: SilkeVariablesWrapperFormProps) {
  return (
    <SilkeModal contextId="autocomplete-dropdown" title="Create variable" onClose={props.onClose}>
      <TextFieldContext size="base" inline={false}>
        <SilkeForm<{ variableName: string; variableValue: string }>
          role="listbox"
          column
          value={{ variableName: '', variableValue: props.variableValue }}
          onSubmit={props.onSubmit}
        >
          <SilkeDivider dark />
          <SilkeTextField autoFocus label="Name" name="variableName" placeholder="Variable name" />
          <SilkeTextField
            label="Value"
            name="variableValue"
            placeholder="Variable value"
            readOnly
          />
          <SilkeBox hPad="s" hAlign="end" gap="s">
            <SilkeButton label="Close" kind="ghost" onClick={props.onClose} />
            <SilkeButton label="Create" kind="primary" type="submit" />
          </SilkeBox>
        </SilkeForm>
      </TextFieldContext>
    </SilkeModal>
  );
}

SilkeVariablesWrapperForm.displayName = 'SilkeVariablesWrapperForm';