/**
 * 设置页面
 * @邠心vbe on 2022/12/9
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, Switch, Pressable } from 'react-native';
import apiUser from '../api/apiUser';
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
      },
      userInfo: {
        notifyLowBalance: false,
        notifyChargingComplete: false,
        notifyPromotionsOffers: false
      },
      intervalList: [10, 15, 20, 30, 60, 90, 120],
      switchStyle: isIOS ? { false: "#B2B2B2", true: colorAccent } : null,
    };
    this.changed = false;
    //global.colorAccent = "#00A9FF"
    //global.colorPrimary = "#00A9FF"
  }

  componentDidMount() {
    this.props.navigation.addListener('blur', () => {
      //console.log("保存设置");
      this.saveSettings();
    });
    this.props.navigation.addListener('focus', () => {
      getUserInfo(info => {
        this.setState({
          userInfo: info
        });
      }, true);
    });
    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
    })
  }

  changeNotifySwitch(key, value) {
    userInfo[key] = value;
    this.setState({
      userInfo: userInfo
    });
    this.changed = true;
  }

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

  saveSettings() {
    global.settingsInfo = this.state.settings
    storage.setStorageJson(SETTINGS_KEY, this.state.settings)
    if (this.changed) {
      apiUser.setNotifySwitch(this.state.userInfo);
    }
  }

  render() {
    return (
      <View style={ui.flex1}>
        <Text style={styles.title}>Notification</Text>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => this.changeNotifySwitch("notifyChargingComplete", !userInfo.notifyChargingComplete)}>
          <Text style={styles.buttonText}>Notify me when charging complete</Text>
          <Switch
            value={this.state.userInfo.notifyChargingComplete}
            trackColor={this.state.switchStyle}
            onValueChange={v => this.changeNotifySwitch("notifyChargingComplete", v)}/>
        </Button>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => this.changeNotifySwitch("notifyLowBalance", !userInfo.notifyLowBalance)}>
          <Text style={styles.buttonText}>Notify me when wallet is low balance</Text>
          <Switch 
            value={this.state.userInfo.notifyLowBalance}
            trackColor={isIOS ? { false: "#B2B2B2", true: colorAccent } : null}
            onValueChange={v => this.changeNotifySwitch("notifyLowBalance", v)}/>
        </Button>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => this.changeNotifySwitch("notifyPromotionsOffers", !userInfo.notifyPromotionsOffers)}>
          <Text style={styles.buttonText}>Notify me for promotions and offers</Text>
          <Switch
            value={this.state.userInfo.notifyPromotionsOffers}
            trackColor={isIOS ? { false: "#B2B2B2", true: colorAccent } : null}
            onValueChange={v => this.changeNotifySwitch("notifyPromotionsOffers", v)}/>
        </Button>
        <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={this.state.switchStyle}
            onValueChange={v => this.changeSwitch('alwaysLocation', v)}/>
        </Button>
        <View style={{height: 56}}>
          <Pressable style={styles.dropdownView} android_ripple={ripple}>
            <Text style={styles.buttonText}>Auto refresh interval</Text>
            <Text style={styles.settingText}>{this.state.settings.refreshInterval}s</Text>
          </Pressable>
          <Dropdown
            style={styles.hideItem}
            list={this.state.intervalList}
            title="Refresh interval"
            suffixList="s"
            showText={false}
            showIcon={false}
            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: colorLight
  },
  itemButton: {
    borderRadius: 0,
    backgroundColor: colorLight
  },
  itemView: {
    flex: 1,
    height: 56,
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  buttonText: {
    flex: 1,
    color: textPrimary,
    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: colorLight
  },
  hideItem: {
    flex: 1,
    height: 56,
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    flexDirection: 'row'
  }
})