import React , { useState , useEffect } from 'react';
import { Select } from 'antd';
import axios from 'axios';
const Option = Select.Option;
const LANGUAGE = [
  "apex",
  "azcli",
  "bat",
  "clojure",
  "coffee",
  "cpp",
  "csharp",
  "csp",
  "css",
  "dockerfile",
  "fsharp",
  "go",
  "handlebars",
  "html",
  "ini",
  "java",
  "javascript",
  "json",
  "less",
  "lua",
  "markdown",
  "msdax",
  "mysql",
  "objective",
  "perl",
  "pgsql",
  "php",
  "postiats",
  "powerquery",
  "powershell",
  "pug",
  "python",
  "r",
  "razor",
  "redis",
  "redshift",
  "ruby",
  "rust",
  "sb",
  "scheme",
  "scss",
  "shell",
  "solidity",
  "sql",
  "st",
  "swift",
  "typescript",
  "vb",
  "xml",
  "yaml",
];

export default (({ language , select_language })=>{
  const [ languages , setLanguage ] = useState(undefined);

  // useEffect(()=>{
  //   const url = '/dev_ops/languages.json';
  //   axios.get(url).then(result=>{
  //     if(result){
  //       setLanguage(result.data);
  //     }
  //   }).catch(error=>{
  //     console.log(error);
  //   })
  // },[])

  function changelanguage(value){
    // let array = value ? languages.filter(item=>item.name === value) :undefined;
    select_language(value);
  }

  return(
    <Select showSearch={true} placeholder={"请选择文本语言"} style={{ width: 200 }} value={language} onChange={changelanguage}>
      <Option value={undefined}>请选择文本语言</Option>
      {LANGUAGE && LANGUAGE.map((item, key) => {
        return <Option value={item}>{item}</Option>;
      })}
    </Select>
  )
})