import Taro, { Component } from '@tarojs/taro'
import { View, Label, Radio } from "@tarojs/components";
import './index.scss'

export default class extends Component {

  render() {
    const { value, color, size, dataset = [], onChange } = this.props

    return (
      <RadioGroup onChange={onChange}>
        {
          dataset.map((item) => {
            const checked = item.value === value
            const checkedColor = color && checked ? `border-color: ${color}` : ''
            const btnSize = size ? `width: ${size}; height: ${size}` : ''
            const btnStyle = `${checkedColor};${btnSize}`

            return (
              <Label key={item.value} className="radio-btn">
                <Radio hidden value={item.value} checked={checked}></Radio>
                <View className={`icon ${checked ? 'checked' : ''}`} style={btnStyle}></View>
                <View className="label">{item.label}</View>
              </Label>
            )
          })
        }
      </RadioGroup>
    )
  }

}
