import React from 'react';
import { Just, Nothing } from 'folktale/maybe';
import * as azimuth from 'azimuth-js';
import * as ob from 'urbit-ob';
import * as need from '../lib/need';

import { Button } from '../components/old/Base';
import { H1, P, Anchor } from '../components/old/Base';
import {
  InnerLabel,
  GalaxyInput,
  AddressInput,
  ValidatedSigil,
  ShowBlockie,
} from '../components/old/Base';
import StatelessTransaction from '../components/old/StatelessTransaction';

import { NETWORK_TYPES } from '../lib/network';
import { canDecodePatp } from '../lib/txn';

import { isValidAddress, isZeroAddress } from '../lib/wallet';

import { isValidGalaxy, compose } from '../lib/lib';
import { withNetwork } from '../store/network';
import { withWallet } from '../store/wallet';
import View from 'components/View';

const buttonTriState = status => {
  if (status === null) return 'blue';
  if (status === false) return 'yellow';
  if (status === true) return 'green';
};

const buttonTriStateText = status => {
  if (status === null) return 'Confirm Galaxy Availablility';
  if (status === false) return 'Galaxy is Not Available';
  if (status === true) return 'Galaxy is Available';
};

class CreateGalaxy extends React.Component {
  constructor(props) {
    super(props);

    const galaxyOwner = need.addressFromWallet(props.wallet);

    this.state = {
      galaxyOwner: galaxyOwner,
      galaxyName: '',
      isAvailable: null,
    };

    this.handleAddressInput = this.handleAddressInput.bind(this);
    this.handleGalaxyNameInput = this.handleGalaxyNameInput.bind(this);
    this.confirmAvailability = this.confirmAvailability.bind(this);
    this.createUnsignedTxn = this.createUnsignedTxn.bind(this);
    this.statelessRef = React.createRef();
  }

  handleGalaxyNameInput = galaxyName => {
    this.setState({ galaxyName, isAvailable: null });
    this.statelessRef.current.clearTxn();
  };

  handleAddressInput = galaxyOwner => {
    this.setState({ galaxyOwner });
    this.statelessRef.current.clearTxn();
  };

  createUnsignedTxn = () => {
    const { state, props } = this;
    if (isValidAddress(state.galaxyOwner) === false) return Nothing();
    if (state.isAvailable === false) return Nothing();
    if (canDecodePatp(state.galaxyName) === false) return Nothing();
    if (isValidGalaxy(state.galaxyName) === false) return Nothing();

    const validContracts = need.contracts(props.contracts);

    const galaxyDec = ob.patp2dec(state.galaxyName);

    const txn = azimuth.ecliptic.createGalaxy(
      validContracts,
      galaxyDec,
      state.galaxyOwner
    );

    return Just(txn);
  };

  confirmAvailability = async () => {
    const { state, props } = this;

    if (canDecodePatp(state.galaxyName) === false) {
      this.setState({ isAvailable: false });
      return;
    }

    const validContracts = need.contracts(props.contracts);

    const galaxyDec = ob.patp2dec(state.galaxyName);

    const currentOwner = await azimuth.azimuth.getOwner(
      validContracts,
      galaxyDec
    );

    const available = isZeroAddress(currentOwner);

    this.setState({ isAvailable: available });
  };

  render() {
    const { props, state } = this;

    const validAddress = isValidAddress(state.galaxyOwner);
    const validGalaxy = isValidGalaxy(state.galaxyName);

    const canGenerate =
      validAddress === true &&
      validGalaxy === true &&
      state.isAvailable === true;

    const esvisible =
      props.networkType === NETWORK_TYPES.ROPSTEN ||
      props.networkType === NETWORK_TYPES.MAINNET;

    const esdomain =
      props.networkType === NETWORK_TYPES.ROPSTEN
        ? 'ropsten.etherscan.io'
        : 'etherscan.io';

    return (
      <View>
        <H1> {'Create a Galaxy'} </H1>

        <P>
          {'Enter the galaxy to create and the address that will own ' +
            'it (defaulting to this account, if not provided).'}
        </P>

        <GalaxyInput
          className="mono"
          prop-size="lg"
          prop-format="innerLabel"
          autoFocus
          placeholder="e.g. ~zod"
          value={state.galaxyName}
          onChange={v => this.handleGalaxyNameInput(v)}>
          <InnerLabel>{'Galaxy Name'}</InnerLabel>
          <ValidatedSigil
            className="tr-0 mt-05 mr-0 abs"
            patp={state.galaxyName}
            size={68}
            margin={8}
          />
        </GalaxyInput>

        <AddressInput
          className="mono mt-8"
          prop-size="lg"
          prop-format="innerLabel"
          value={state.galaxyOwner}
          onChange={v => this.handleAddressInput(v)}>
          <InnerLabel>{'Address that will own this galaxy'}</InnerLabel>
          <ShowBlockie className={'mt-1'} address={state.galaxyOwner} />
        </AddressInput>

        <Anchor
          className={'mt-1'}
          prop-size={'sm'}
          prop-disabled={!validAddress || !esvisible}
          target={'_blank'}
          href={`https://${esdomain}/address/${state.galaxyOwner}`}>
          {'View on Etherscan ↗'}
        </Anchor>

        <Button
          prop-size="lg wide"
          className="mt-8"
          prop-color={buttonTriState(state.isAvailable)}
          disabled={!validGalaxy}
          onClick={() => this.confirmAvailability()}>
          {buttonTriStateText(state.isAvailable)}
        </Button>

        <StatelessTransaction
          ref={this.statelessRef}
          canGenerate={canGenerate}
          createUnsignedTxn={this.createUnsignedTxn}
        />
      </View>
    );
  }
}

export default compose(
  withNetwork,
  withWallet
)(CreateGalaxy);