
import React, { Component } from 'react';
import { Card, Tooltip, Button, Modal, Input, Popover } from 'antd';
import InspectorStyles from './Inspector.css';
import frameworks from '../../lib/client-frameworks';
require('codemirror/mode/javascript/javascript');
require('codemirror/lib/codemirror');
import { Controlled as CodeMirror } from "react-codemirror2";


import { withTranslation } from '../../util';


import {
  SaveOutlined,
  CodeOutlined,
  InsertRowBelowOutlined,
  CodeSandboxOutlined
} from '@ant-design/icons';
import {saveTestCaseText} from '../../actions/Inspector';

const ButtonGroup = Button.Group;

const content = (
  <div>
    <p>
      Content
    </p>
  </div>
);

class RecordedActions extends Component {

  code () {
    let {actionFramework, recordContent, requireVars
    } = this.props;
    let framework = new frameworks[actionFramework];
    // framework.actions = recordedActions;
    let rawCode = framework.getCodeString(recordContent, false);
    if (requireVars.length > 0) {
      return `//- ${JSON.stringify(requireVars)} -// \n` + rawCode ;
    }
    return rawCode;
    // return highlight(framework.language, rawCode, true).value;
  }

  actionBar () {
    const {
      showBoilerplate,
      recordContent,
      toggleShowBoilerplate,
      saveExecuteScriptAppear,
      insertTestCaseAppear,
      saveExecuteScript,
      t,
    } = this.props;

    // let frameworkOpts = Object.keys(frameworks).map((f) => <Option value={f} key={f}>
    //   {frameworks[f].readableName}
    // </Option>);
    return <div>
      {/*{!!recordedActions.length &&*/}
      {/*  <Select defaultValue={actionFramework} onChange={setActionFramework}*/}
      {/*    className={InspectorStyles['framework-dropdown']} size="small">*/}
      {/*    {frameworkOpts}*/}
      {/*  </Select>*/}
      {/*}*/}
      {<ButtonGroup size="small">

          { (!!recordContent.length) &&
            <Tooltip title={t('Save Record')}>
              <Button
                onClick={() => {
                  saveExecuteScript('', this.code());
                  // saveExecuteScriptAppear(true)
                }}
                icon={<SaveOutlined/>}
              />
            </Tooltip>
          }
          { (!!recordContent.length) &&
            <Tooltip title={t('Insert Network')}>
              <Popover content={content} title='示例代码'>
                <Button
                  icon={<InsertRowBelowOutlined/>}
                />
              </Popover>
            </Tooltip>
          }
          {
            <Tooltip title={t('Insert Test Case')}>
                <Button
                  onClick={() => {
                    insertTestCaseAppear(true);
                  }}
                  icon={<CodeSandboxOutlined/>}
                />
            </Tooltip>
          }
          {/*{!!recordContent.length &&*/}
          {/*<Tooltip title={t('Show/Hide Boilerplate Code')}>*/}
          {/*  <Button*/}
          {/*    onClick={toggleShowBoilerplate}*/}
          {/*    icon={<ExportOutlined/>}*/}
          {/*    type={showBoilerplate ? BUTTON.PRIMARY : BUTTON.DEFAULT}*/}
          {/*  />*/}
          {/*</Tooltip>*/}
          {/*}*/}
          {/*{!!recordContent.length &&*/}
          {/*<Tooltip title={t('Copy code to clipboard')}>*/}
          {/*  <Button*/}
          {/*    icon={<CopyOutlined/>}*/}
          {/*    onClick={() => clipboard.writeText(recordContent)}*/}
          {/*  />*/}
          {/*</Tooltip>*/}
          {/*}*/}
          {/*{!!recordedActions.length &&*/}
          {/*<Tooltip title={t('Clear Actions')}>*/}
          {/*  <Button*/}
          {/*    icon={<DeleteOutlined/>}*/}
          {/*    onClick={clearRecording}/>*/}
          {/*</Tooltip>*/}
          {/*}*/}
          {/*{<Tooltip title={t('Close Recorder')}>*/}
          {/*  <Button*/}
          {/*    icon={<CloseOutlined/>}*/}
          {/*    onClick={closeRecorder}/>*/}
          {/*</Tooltip>}*/}
        </ButtonGroup>
      }
    </div>;
  }

  render () {

    const {setRecordContent, setRecordCursor, saveExecuteScriptAppear, isSaveExecuteScript, saveExecuteScript, savedScriptText, savedText, insertTestCaseAppear, isInsertTestCaseAppear, insertTestCaseName,insertTestCase, setFieldValue, recordCursorData, t} = this.props;
    const code = this.code();
    return <Card title={<span><CodeOutlined /> {t('Recorder')}</span>}
                 className={InspectorStyles['recorded-actions']}
                 extra={this.actionBar()}
    >
      <CodeMirror
        className={InspectorStyles['recorded-code']}
        value={code}
        options={{
          mode: "javascript",
          theme: "base16-light",
          lineNumbers: true,
          lineWrapping: true
        }}
        onBeforeChange={(editor, data, value) => {
          console.log(`onBeforeChange====>>>>${data.line},${data.ch}`);
          // 手动输入时
          setRecordContent(value);
        }}
        cursor={recordCursorData}
        onCursor={(editor,data) => {
          console.log("onCursor=>>>>>>>>>>>>");
          setRecordCursor(data);
        }}
      />
      {/*<Modal visible={isSaveExecuteScript}*/}
      {/*       title={t('Save Script With Name')}*/}
      {/*       okText='Save'*/}
      {/*       cancelText='Cancel'*/}
      {/*       onCancel={() => saveExecuteScriptAppear(false)}*/}
      {/*       onOk={() => {*/}
      {/*         saveExecuteScript(savedScriptText, code)*/}
      {/*       }}>*/}
      {/*  <Input onChange={(e) => savedText(e.target.value)} addonBefore={t('Name')} value={savedScriptText}/>*/}
      {/*</Modal>*/}
      <Modal visible={isInsertTestCaseAppear}
             title={t('Insert Test Case With Name')}
             okText='Insert'
             cancelText='Cancel'
             onCancel={() => insertTestCaseAppear(false)}
             onOk={() => {
               insertTestCase(insertTestCaseName)
               insertTestCaseAppear(false)
             }}>
        <Input
          placeholder={t('Enter test case name')}
          value={insertTestCaseName}
          onChange={(e) => setFieldValue('insertTestCaseName', e.target.value)}
        />
      </Modal>
    </Card>;
  }
}

export default withTranslation(RecordedActions);
