import { Button } from 'antd';

const EditAndSaveButton = ({
  isEditFields,
  handleToggleEdit,
}: {
  isEditFields: boolean;
  handleToggleEdit: () => void;
}): JSX.Element => {
  return !isEditFields ? (
    <Button onClick={handleToggleEdit} type="primary">
      Редактировать
    </Button>
  ) : (
    <>
      <Button
        style={{
          marginLeft: 30,
        }}
        onClick={handleToggleEdit}
        type="primary"
      >
        Отмена
      </Button>
      <Button
        style={{
          marginLeft: 30,
        }}
        type="primary"
        onClick={() => {
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          document
            .getElementById('myForm')
            .dispatchEvent(
              new Event('submit', { cancelable: true, bubbles: true }),
            );
          handleToggleEdit();
        }}
      >
        Сохранить
      </Button>
    </>
  );
};

export default EditAndSaveButton;
