import _ from 'lodash';
import React from 'react';
import {StyleSheet} from 'react-native';
import {Checkbox, Switch, ColorPalette, Colors, RadioButton, RadioGroup, Slider, Text, View} from '@ermeschultz/react-native-ui-lib';

export function renderHeader(title, others) {
  return (
    <Text text30 grey10 {...others}>
      {title}
    </Text>
  );
}

export function renderBooleanOption(title, key) {
  const value = this.state[key];
  return (
    <View row centerV spread marginB-s4 key={key}>
      <Text text70 style={{flex: 1}}>
        {title}
      </Text>
      <Switch
        useCustomTheme
        key={key}
        textID={key}
        value={value}
        onValueChange={value => this.setState({[key]: value})}
      />
    </View>
  );
}

export function renderBooleanGroup(title, options) {
  return (
    <View marginB-s2>
      <Text text70M marginB-s2>
        {title}
      </Text>
      <View row style={styles.rowWrap}>
        {_.map(options, key => {
          const value = this.state[key];
          return (
            <View spread centerH row key={key}>
              <Checkbox
                marginR-s2
                useCustomTheme
                key={key}
                testID={key}
                value={value}
                onValueChange={value => this.setState({[key]: value})}
              />
              <Text text70 marginR-s3 marginB-s2>
                {key}
              </Text>
            </View>
          );
        })}
      </View>
    </View>
  );
}

export function renderRadioGroup(title, key, options, {isRow, afterValueChanged, useValueAsLabel} = {}) {
  const value = this.state[key];
  return (
    <View marginB-s2>
      {!_.isUndefined(title) && <Text text70M marginB-s2>
        {title}
      </Text>}
      <RadioGroup
        row={isRow}
        style={isRow && styles.rowWrap}
        initialValue={value}
        onValueChange={value => this.setState({[key]: value}, afterValueChanged)}
      >
        {_.map(options, (value, key) => {
          return (
            <RadioButton
              useCustomTheme
              testID={key}
              key={key}
              marginB-s2
              marginR-s2={isRow}
              label={useValueAsLabel ? value : key}
              value={value}
            />
          );
        })}
      </RadioGroup>
    </View>
  );
}

export function renderColorOption(title,
  key,
  colors = ['transparent', Colors.blue30, Colors.grey10, Colors.yellow30, Colors.green30, Colors.purple30]) {
  const value = this.state[key];
  return (
    <View marginV-s2>
      <Text text70M>{title}</Text>
      <ColorPalette
        value={value}
        colors={colors}
        onValueChange={value => this.setState({[key]: value === 'transparent' ? undefined : value})}
      />
    </View>
  );
}

export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0, sliderText = ''}) {
  const value = this.state[key] || initial;
  return (
    <View marginV-s2>
      <Text marginB-s1 text70M>
        {title}
      </Text>
      <View row centerV>
        <Slider
          testID={key}
          value={initial}
          containerStyle={{flex: 1}}
          minimumValue={min}
          maximumValue={max}
          step={step}
          onValueChange={value => this.setState({[key]: value})}
        />
        <Text marginL-s4 text70 style={styles.text}>
          {sliderText}
          {value}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  rowWrap: {
    flexWrap: 'wrap'
  },
  text: {
    width: 30
  }
});
