import React from 'react';
import axios from '../utility/axios';
import ModalBase from './ModalBase';
import { FormRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
import { TextField } from '../utility/inputs';
import { Formik, Form } from 'formik';
import SqlEditor from '../sqleditor/SqlEditor';
// import FormikForm from '../utility/FormikForm';
import styled from 'styled-components';

const SqlWrapper = styled.div`
  position: relative;
  height: 30vh;
  width: 40vw;
`;

export default function ConfirmSqlModal({ modalState, sql, engine }) {
  return (
    <ModalBase modalState={modalState}>
      <h2>Save changes</h2>
      <SqlWrapper>
        <SqlEditor value={sql} engine={engine} />
      </SqlWrapper>

      <FormRow>
        <input type="button" value="OK" onClick={modalState.close} />
        <input type="button" value="Close" onClick={modalState.close} />
      </FormRow>
    </ModalBase>
  );
}