import React from 'react';
import { Switch } from '@txdfe/at';
import exceed from '../../utils/api';
import './index.scss';

class SettingItem extends React.Component {
  onChange = (value) => {
    this.props.onChange(value, this.props.item);
  }
  render() {
    const { item } = this.props;
    if (item.type === 'checkbox') {
      return (
        <div className="uiless-extension-setting-item">
          <div className="uiless-extension-setting-item-container">
            <div className="uiless-extension-setting-item-info">
              <span className="uiless-extension-setting-item-title">{item.title.zh_CN}</span>
              <span className="uiless-extension-setting-item-description">{item.description.zh_CN}</span>
            </div>
            <div className="uiless-extension-setting-item-action">
              <Switch onChange={this.onChange} checked={item.value} />
            </div>
          </div>
        </div>
      )
    }
    return null;
  }
}

export default SettingItem;