/**
 * 设置页面
 * @邠心vbe on 2022/12/9
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, Switch } from 'react-native';
import { Value } from 'react-native-reanimated';
import Button from '../components/Button';
import Dropdown from '../components/Dropdown';
import storage from '../utils/storage';

export const SETTINGS_KEY = 'CHARGE_SETTINGS'
export const SettingUtil = {
  getSettings: (back) => {
    if (!global.settingsInfo) {
      storage.getStorage(SETTINGS_KEY).then(sto => {
        if (sto) {
          const res = JSON.parse(sto);
          global.settingsInfo = res;
          back(global.settingsInfo)
        } else {
          back({
            alwaysLocation: true,
            refreshInterval: 10
          })
        }
      })
    } else {
      back(global.settingsInfo)
    }
  }
}

export default class Settings extends Component {
  constructor(props) {
    super(props);
    this.state = {
      settings: {
        alwaysLocation: true,
        refreshInterval: 10
      },
      intervalList: [10, 15, 20, 30, 60, 90, 120]
    };
  }

  componentDidMount() {
    this.props.navigation.addListener('blur', () => {
      //console.log("保存设置");
      global.settingsInfo = this.state.settings
      storage.setStorageJson(SETTINGS_KEY, this.state.settings)
    });
    SettingUtil.getSettings(res => {
      const info = this.state.settings;
      for (let item in info) {
        if (res[item] !== undefined) {
          info[item] = res[item]
        }
      }
      this.setState({
        settings: info
      })
    })
  }

  changeSwitch(key, value) {
    this.state.settings[key] = value
    //console.log('changeSwitch', item);
    this.setState({
      settings: this.state.settings
    })
  }

  changeSettings(key, value) {
    this.state.settings[key] = value
    this.setState({
      settings: this.state.settings
    })
  }

  render() {
    return (
      <View style={ui.flex1}>
        <Text style={styles.title}>Maps</Text>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => this.changeSwitch('alwaysLocation', !this.state.settings.alwaysLocation)}>
          <Text style={styles.buttonText}>Always show my locations</Text>
          <Switch
            value={this.state.settings.alwaysLocation}
            trackColor={isIOS ? { false: "#B2B2B2", true: colorAccent } : null}
            onValueChange={v => {
              this.changeSwitch('alwaysLocation', v);
            }}/>
        </Button>
        <View style={{height: 56}}>
          <View style={styles.dropdownView}>
            <Text style={styles.buttonText}>Auto refresh interval</Text>
            <Text style={styles.settingText}>{this.state.settings.refreshInterval}s</Text>
          </View>
          <Dropdown
            style={styles.hideItem}
            list={this.state.intervalList}
            title="Refresh interval"
            suffixList="s"
            value={this.state.settings.refreshInterval}
            rippleStyle={ripple}
            onChange={v => this.changeSettings("refreshInterval", v)}
          />
        </View>
        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  title: {
    color: '#888',
    fontSize: 12,
    ...$padding(8, 16, 4),
    backgroundColor: 'white'
  },
  itemButton: {
    borderRadius: 0,
    backgroundColor: 'white'
  },
  itemView: {
    flex: 1,
    height: 56,
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  buttonText: {
    flex: 1,
    color: '#333',
    fontSize: 16
  },
  settingText: {
    color: '#666',
    fontSize: 15
  },
  dropdownView: {
    top: 0,
    left: 0,
    right: 0,
    height: 56,
    paddingLeft: 16,
    paddingRight: 16,
    position: 'absolute',
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: 'white'
  },
  hideItem: {
    flex: 1,
    height: 56,
    opacity: 0,
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    flexDirection: 'row'
  }
})