import { Button, Checkbox, Input, Modal } from 'antd';
import axios from 'axios';
import React, { useState } from 'react';

function NpmModal(props){
  const {npsActionType, npsActionId} = props;
  const [activeGrade, setActiveGrade] = useState(undefined);
  const [checkGroupValue, setCheckGroupValue] = useState(undefined);
  const [inputValue, setInputValue] = useState(undefined);
  const [success, setSuccess] = useState(false);
  const [visible, setVisible] = useState(true);
  // 提交按钮失效
  const [disabled, setDisabled] = useState(false);
  const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  // 提交意见
  function submit(){
    setDisabled(true);
    axios.post(`/nps.json`,{
      action_type: npsActionType,
      action_id: npsActionId,
      score: activeGrade,
      memo:`${checkGroupValue && checkGroupValue.length !== 0 ? checkGroupValue.toString() + "。" : ''}${inputValue ? inputValue : ''}`
    }).then((response) => {
      if (response.data) {
        setVisible(false);
        setSuccess(true);
        // 三秒之后自动关闭
        setTimeout(()=>{
          setSuccess(false);
        },3000)
      }
    }).catch(function (error) {
      console.log(error);
    });
  }
  return <div>
    <Modal
      visible={true && visible}
      title=""
      onCancel={props.closeNpsModal}
      className='npmModal'
      width={690}
      footer={(activeGrade || activeGrade === 0) ? <Button type='primary' style={{width:180}} onClick={submit} disabled={disabled}>提交</Button> : null}
    >
      <div className='mt40 font-18'>您向朋友或同事推荐GitLink平台的可能性有多大？</div>
      <div className='gradeBox font-16'>
        <span>不可能</span>
        {arr.map(item=>{return <span key={item} className={`oneGradeItem font-18 ml10 ${item<=5? 'grade1' : item<=8? 'grade2' : 'grade3'} ${item === activeGrade ? 'active' : ''}`} onClick={()=>{setActiveGrade(item)}}>{item}</span>})}
        <span className='ml10'>极有可能</span>
      </div>
      {(activeGrade || activeGrade === 0) && <div>
        <div className='font-16 mb15'>您觉得以下哪些我们可以做的更好？（选填）</div>
        <Checkbox.Group className='gradeCheckbox' onChange={(e)=>{setCheckGroupValue(e)}}>
          <Checkbox value="期待更加丰富的功能">期待更加丰富的功能</Checkbox>
          <Checkbox value="部分功能不会用，希望有新手引导">部分功能不会用，希望有新手引导</Checkbox>
          <Checkbox value="已有的功能模块，用户体验需进一步提升">已有的功能模块，用户体验需进一步提升</Checkbox>
          <Checkbox value="其他">其他</Checkbox>
        </Checkbox.Group>
        <Input.TextArea placeholder='欢迎您填写宝贵建议（选填）' autoSize={{minRows: 6}} maxLength={500} className='gradeInput' onChange={(e)=>{setInputValue(e.target.value);}}/>
      </div>}
    </Modal>
    <Modal
      visible={success}
      onCancel={()=>{setSuccess(false)}}
      className='npmSuccessModal'
      width={450}
      footer={null}
    >
      <div className='successTips'>
        <div className='mb15 font-18'>提交成功</div>
        <div className='font-17'>感谢您的反馈!</div>
      </div>
    </Modal>
  </div>
}
export default NpmModal