import React, { createElement, useState, useEffect, Component } from 'react';
import { Radio } from '@alifd/next';
import './index.scss'
const RadioGroup = Radio.Group;


interface AxisSetterProps {
  onChange:(string)=>void
  options:Array<{
    label:string
    value:string
    key:number
  }>
}

const list = [
  {label:'横轴',value:'xAxis',key:0},
  {label:'纵轴',value:'yAxis',key:1},
]

const AxisSetter:React.FC<AxisSetterProps> = (props)=>{
  const { onChange,options } = props
  const radioList = options||list
  const [type,setType] = useState(radioList[0].value)

  //切换横轴纵轴
  const typeChange = (value)=>{
    setType(value)
  }
  useEffect(()=>{
    onChange(type)
  },[type])

  return(
    <div className='axis-radio'>
      <RadioGroup shape="button" dataSource={radioList} value={type} onChange={typeChange} />
    </div>
  )
}

export default class extends Component<AxisSetterProps> {
  render() {
    return <AxisSetter {...this.props} />;
  }
}