import React , { useEffect , useState } from 'react';
import { Button } from 'antd';
import Choosen from './Choosen';
import Editors from './Editors';

function Init({ datas , templates , saveFunc , saveDatas}){
  const [ templateId , setTemplateId ] = useState(undefined);
  const [ ymlValue , setYmlValue ] = useState(undefined);
  const [ temp , setTemp ] = useState(undefined);

  useEffect(()=>{
    if(templates && templates.length > 0){
      setTemp(templates)
    }
  },[templates])

  useEffect(()=>{
    if(datas && datas.length > 0){
      setTemplateId(datas[0].template_id);
      setYmlValue(datas[0].content);
    }
  },[datas])

  // 选择模板
  function chooseFunc(content,id,cate){
    setTemplateId(id);
    setYmlValue(content);
    recieveData(id,content);
  }

  function recieveData(id,content){
    let steps = datas;
    if(datas && datas.length>0){
      steps[0].content = content || ymlValue;
      steps[0].template_id = id || templateId ;
    }else{
      steps = 
      [{
        step_name:"初始化",
        show_index:1,
        content:content || ymlValue,
        template_id:id || templateId
      }]
    }
    saveDatas(steps);
  }

  // 点击下一步时
  function nextStep(){
    recieveData();
    saveFunc(undefined,undefined,undefined,undefined,"next");
  }

  return(
    <div>
      <Choosen chooseFunc={chooseFunc} templateId={templateId} temp={temp}/>
      <div className="mt15">
        <Editors value={ymlValue} onChange={setYmlValue} theme={"vs-dark"} height={"400px"}/>
      </div>
      <div className="mt20">
        <Button type={"primary"} onClick={nextStep}>下一步</Button>
      </div>
    </div>
  )
}
export default Init;