import { Button, Cell, Grid, TextInput } from "@sc/components/ui";
import { AppConfig } from "@sc/modules/app";
import _ from "lodash";
import React, { Component } from "react";
import { Link } from "react-router-dom";
// import { app } from "../../../config";
import providers from "../../settings/IntegrationManagement/integrationProviders";

export default class ChooseName extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: ""
    };

    this.saveName = this.saveName.bind(this);
  }

  static contextType = AppConfig;

  getProviderInfo(props) {
    const { app } = this.context;
    const payload = _.get(props, "providerSettings.payload", false);

    const providerInfo = _.get(payload, "type", app.defaultProvider);

    this.setState({ name: payload.name });

    return providerInfo;
  }

  componentDidMount() {
    const providerType = this.getProviderInfo(this.props);
    this.providerInfo = _.filter(providers, o => o.id === providerType)[0];
  }

  componentWillReceiveProps(nextProps) {
    const providerType = this.getProviderInfo(nextProps);
    this.providerInfo = _.filter(providers, o => o.id === providerType)[0];
  }

  async saveName() {
    const { updateSettings, history, nextHref } = this.props;
    const { name } = this.state;

    const payload = _.get(this.props, "providerSettings.payload", false);

    await updateSettings({
      ...payload,
      name
    });

    // Show the Next Screen
    history.push(nextHref);
  }

  render() {
    if (!this.props.hidden) {
      return (
        <div
          style={{
            width: 550,
            margin: "0 auto"
          }}
        >
          <div style={{ marginTop: -30 }}>
            <img
              alt=""
              src={_.get(
                this,
                "providerInfo.img",
                "https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png"
              )}
              style={{ height: 75, margin: 20 }}
            />
            <br />
          </div>
          <h2>{this.props.message}</h2>

          <TextInput
            style={{ textAlign: "center" }}
            placeholder="Please enter a name here..."
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
          />
          <Grid
            justify="space-evenly"
            style={{
              marginTop: 30
            }}
          >
            <Cell align="center">
              {this.props.showProvider ? (
                <Link to={this.props.prevHref}>
                  <Button large transparent style={{ color: "#333" }}>
                    Back
                  </Button>
                </Link>
              ) : null}
              <Button large tertiary onClick={this.saveName}>
                Next
              </Button>
            </Cell>
          </Grid>
        </div>
      );
    }
    return null;
  }
}