import React , { useState , useEffect } from 'react';
import { Select } from 'antd';
import { getUrl } from 'educoder';

import axios from 'axios';
const Option = Select.Option;

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

  useEffect(()=>{
    const url = '/ci/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,array && array[0]);
  }

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

  return(
    <React.Fragment>
      {
        six &&
        <ul className="language">
          {
            six.map((item,key)=>{
              return(
                key < 6 ? <li className={language ===item.name ? "active":""} onClick={()=>changelanguage(item.name)}><img alt="" src={item.cover_url && getUrl(item.cover_url)} /></li> : ""
              )
            })
          }
        </ul>
      }
      <Select showSearch={true} placeholder={"请选择文本语言"} style={{ width: 200 }} value={language} onChange={changelanguage}>
        <Option value={undefined}>请选择文本语言</Option>
        {languages && languages.map((item, key) => {
          return <Option value={item.name}>{item.name}</Option>;
        })}
      </Select>
    </React.Fragment>
  )
})