import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";

import { css } from "@emotion/react";

const SELECT_MENU_OPTIONS = [
  { value: "1", name: "BLS" },
  { value: "2", name: "SECP256K1" },
  // { value: '3', name: 'MULTISIG' },
];

const SELECT_MENU_MAP = {
  "1": "BLS",
  "2": "SECP256K1",
  // '3': 'MULTISIG',
};

const SELECT_MENU_SAVE_STRINGS = {
  "1": "bls",
  "2": "secp256k1",
};

export default class SidebarCreateWalletAddress extends React.Component {
  state = {
    name: "",
    type: "1",
    default: false,
    loading: false,
  };

  _handleSubmit = async () => {
    this.setState({ loading: true });

    const data = {
      name: this.state.name,
      wallet_type: SELECT_MENU_SAVE_STRINGS[this.state.type],
      makeDefault: this.state.default,
      type: "CREATE_WALLET_ADDRESS",
    };

    await this.props.onSubmit(data);

    this.setState({ loading: false });
  };

  _handleCancel = () => {
    this.props.onCancel();
  };

  _handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    return (
      <div>
        <System.P
          style={{
            fontFamily: Constants.font.semiBold,
            fontSize: Constants.typescale.lvl3,
          }}
        >
          Create a new address
        </System.P>

        <System.Input
          containerStyle={{ marginTop: 24 }}
          label="Address name"
          name="name"
          value={this.state.name}
          onChange={this._handleChange}
        />

        <System.SelectMenu
          full
          containerStyle={{ marginTop: 24 }}
          name="type"
          label="Address type"
          value={this.state.type}
          category="type"
          onChange={this._handleChange}
          options={SELECT_MENU_OPTIONS}
        />

        <System.CheckBox
          style={{ marginTop: 24 }}
          name="default"
          value={this.state.default}
          onChange={this._handleChange}
        >
          Make this wallet the default
        </System.CheckBox>

        <System.ButtonPrimary
          full
          style={{ marginTop: 48 }}
          onClick={this._handleSubmit}
          loading={this.state.loading}
        >
          Create {this.state.name}
        </System.ButtonPrimary>

        <System.ButtonSecondary
          full
          style={{ marginTop: 16 }}
          onClick={this._handleCancel}
        >
          Cancel
        </System.ButtonSecondary>
      </div>
    );
  }
}