import React from 'react'
import './index.scss'
import { Select } from 'antd'

const Option = Select.Option

export default ({ onFontSizeChange
  , cmFontSize, cmCodeMode,
  onCodeModeChange,
  shixun }) => {
  const { task_pass, forbid_copy, test_set_permission } = shixun

  return (
    <div className="tpi-code-setting">
      <h3>代码格式</h3>
      <section>
        <div className="file-item">
          <b>显示模式</b>
          <Select bordered={false} size='small' value={cmCodeMode} onChange={onCodeModeChange} >
            <Option value={'vs'}>白色背景</Option>
            <Option value={'vs-dark'}>黑色背景</Option>
          </Select>
        </div>
        <div className="file-item">
          <b>字体大小</b>
          <Select bordered={false} size='small' value={cmFontSize} onChange={onFontSizeChange}>
            <Option value={12}>12px</Option>
            <Option value={14}>14px</Option>
            <Option value={16}>16px</Option>
            <Option value={18}>18px</Option>
            <Option value={20}>20px</Option>
            <Option value={22}>22px</Option>
          </Select>
        </div>
      </section>
      <h3>快捷键</h3>
      <section>
        <div className="file-item">
          <b>保存代码</b>
          <span>Ctrl + S</span>
        </div>
        <div className="file-item">
          <b>唤出快捷键列表</b>
          <span>F1 / Alt + F1</span>
        </div>
        <div className="file-item">
          <b>左右缩进</b>
          <span>Ctrl + ]/[</span>
        </div>
        <div className="file-item">
          <b>跳到匹配的括号</b>
          <span>Ctrl + Shift + \</span>
        </div>
        <div className="file-item">
          <b>转到行首</b>
          <span>Home</span>
        </div>
        <div className="file-item">
          <b>转到行尾</b>
          <span>End</span>
        </div>
      </section>
      <h3>关卡配置信息</h3>
      <section>
        <a className="file-item" title={task_pass ? "允许学员跳关挑战" : "不允许学员跳关挑战"}>
          <b>跳关</b>
          <span>{task_pass ? '允许' : '不允许'}</span>
        </a>
        <a className="file-item" title={test_set_permission ? "允许学员通过金币解锁查看测试集内容"
          : "不允许学员通过金币解锁查看测试集内容"}>
          <b>测试集解锁</b>
          <span>{test_set_permission ? '允许' : '不允许'}</span>
        </a>
        <a className="file-item" title={forbid_copy ? "不允许学员复制和粘贴代码" : "允许学员复制和粘贴代码"}>
          <b>代码复制粘贴</b>
          <span>{!forbid_copy ? '允许' : '不允许'}</span>
        </a>
      </section>
    </div>
  )
}