/* @flow strict-local */
import React, { PureComponent } from 'react';
import { Switch } from 'react-native';
import { BRAND_COLOR } from '../styles';

type Props = {|
  disabled: boolean,
  defaultValue: boolean,
  onValueChange: (arg: boolean) => void,
|};

type State = {|
  valueControlled: boolean,
|};

/**
 * An on/off component, provides consistent styling of the
 * built-in Switch component.
 *
 * @prop [disabled] - If set the component is not switchable and visually looks disabled.
 * @prop [defaultValue] - Initial value of the switch.
 * @prop onValueChange - Event called on switch.
 */
export default class ZulipSwitch extends PureComponent<Props, State> {
  state = {
    valueControlled: this.props.defaultValue,
  };

  static defaultProps = {
    disabled: false,
    defaultValue: false,
  };

  handleValueChange = (newValue: boolean) => {
    const { onValueChange } = this.props;

    onValueChange(newValue);

    this.setState({
      valueControlled: newValue,
    });
  };

  render() {
    const { disabled } = this.props;
    const { valueControlled } = this.state;

    return (
      <Switch
        value={valueControlled}
        trackColor={{
          false: 'hsl(0, 0%, 86%)',
          true: BRAND_COLOR,
        }}
        onValueChange={this.handleValueChange}
        disabled={disabled}
      />
    );
  }
}

@@ -497,17 +497,16 @@
 * @prop 
-%5B
 defaultV
@@ -509,17 +509,16 @@
 ultValue
-%5D
  - Initi
@@ -780,33 +780,8 @@
 se,%0A
-    defaultValue: false,%0A
   %7D;

Mark `defaultValue` prop as required.