import { ModalContainer } from './ModalContainer';
import { Box, Button } from 'components/common';
import { Input } from 'components/inputs';

interface RenameModalProps {
  title?: string;
  placeholder?: string;
  value: string;
  onChange: React.ChangeEventHandler<HTMLInputElement>;
  onSubmit: React.FormEventHandler<HTMLFormElement>;
  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
}

export const RenameModal = ({
  title = 'Rename',
  placeholder,
  value,
  onChange,
  onSubmit,
  onDismiss,
}: RenameModalProps) => {
  return (
    <ModalContainer title={title}>
      <form onSubmit={onSubmit}>
        <Input
          value={value}
          onChange={onChange}
          placeholder={placeholder}
          onFocus={(ev) => ev.target.select()}
          autoFocus
        />

        <Box display="flex" marginY={4} spacing={2}>
          <Button onClick={onDismiss} color="gray" block>
            Cancel
          </Button>
          <Button type="submit" color="blue" block disabled={!value}>
            Rename
          </Button>
        </Box>
      </form>
    </ModalContainer>
  );
};