import React from 'react';
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import StyledWrapper from './StyledWrapper';
import QueryEditor from '../QueryEditor';
import RequestHeaders from '../RequestHeaders';

const GraphQLRequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange}) => {
  return (
    <StyledWrapper className="h-full">
      <Tabs className='react-tabs mt-1 flex flex-grow flex-col h-full' forceRenderTabPanel>
        <TabList>
          <Tab tabIndex="-1">Query</Tab>
          <Tab tabIndex="-1">Headers</Tab>
        </TabList>
        <TabPanel>
          <div className="mt-4">
            <QueryEditor
              schema={schema}
              width={leftPaneWidth}
              value={value}
              onRunQuery={onRunQuery}
              onEdit={onQueryChange}
            />
          </div>
        </TabPanel>
        <TabPanel>
          <RequestHeaders />
        </TabPanel>
      </Tabs>
    </StyledWrapper>
  )
};

export default GraphQLRequestPane;