import { useState } from 'react';
import { Button, Modal, Tabs } from 'antd';
import { QuestionCircleTwoTone } from '@ant-design/icons';
import SyntaxTab from './SyntaxTab';
import FieldTab from './FieldTab';
import styles from './HelpQuery.module.scss';

const { TabPane } = Tabs;

const HelpQuery = (): JSX.Element => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleCancel = (): void => {
    setIsModalVisible(false);
  };
  const showModal = (): void => {
    setIsModalVisible(true);
  };
  return (
    <div className={styles['container']}>
      <Button type="link" onClick={showModal}>
        <QuestionCircleTwoTone style={{ fontSize: 30 }} />
      </Button>
      <Modal
        width={1000}
        title="Помощь по коррелятору"
        visible={isModalVisible}
        footer={null}
        onCancel={handleCancel}
      >
        <Tabs defaultActiveKey="1">
          <TabPane tab="Синтаксис" key="1">
            <SyntaxTab />
          </TabPane>
          <TabPane tab="Поля" key="2">
            <FieldTab />
          </TabPane>
        </Tabs>
      </Modal>
    </div>
  );
};

export default HelpQuery;
