import React from 'react'
import * as more from 'more-entropy'
import lodash from 'lodash'
import * as sigil from 'sigil-js'
import ob from 'urbit-ob'
import classnames from 'classnames'
// temporarily use keygen-js with argon2u that is configured with 520MB
import * as kg from '../../../node_modules/urbit-key-generation/dist/index'


import Button from '../components/Button'
import ReactSVGComponents from '../components/ReactSVGComponents'
import PaperCollateralRenderer from 'PaperCollateralRenderer'

import { MAX_GALAXY, MIN_STAR, MAX_STAR, MIN_PLANET,
         GALAXY_ENTROPY_BITS, STAR_ENTROPY_BITS, PLANET_ENTROPY_BITS,
         SEED_ENTROPY_BITS,
         GEN_STATES
       } from '../lib/constants'

const SEED_LENGTH_BYTES = SEED_ENTROPY_BITS / 8
const NEXT_STEP_NUM = 6;


const shipInfo = ship => {
  const name = ob.patp(ship)
  const sig = sigil.pour({
    colorway: ['black', 'white'],
    patp: name,
    renderer: ReactSVGComponents,
    size: 233
  })

  return ship < MAX_GALAXY
    ? galaxyInfo(name, sig)
    : ship < MAX_STAR
    ? starInfo(name, sig)
    : planetInfo(name, sig)
}

const infoHeader = ship =>
  <div className={'row text-600 text-mono'} key={ ship + '-header' }>
    {ship + ' Wallet'}
  </div>

const infoSigil = (ship, sig) => {
  return (
    <div className={ '' } key={ 'sigil-' + ship }>
      { sig }
    </div>
  )
}

const getColor = (classOf, seedType) => {
  if (classOf === 'galaxy') {
    if (seedType === 'manage') return 'bg-medium';
    if (seedType === 'voting') return 'bg-medium';
    if (seedType === 'spawn') return 'bg-high';
    if (seedType === 'master') return 'bg-very-high';
    if (seedType === 'masterShard') return 'bg-very-high';
  }
  if (classOf === 'star') {
    if (seedType === 'manage') return 'bg-low';
    if (seedType === 'spawn') return 'bg-medium';
    if (seedType === 'master') return 'bg-high';
  }
  if (classOf === 'planet') {
    if (seedType === 'manage') return 'bg-low';
    if (seedType === 'master') return 'bg-medium';
  }

}



const infoManagementSeed = ship => {
  const classOf = ob.clan(ship)
  const colorClass = getColor(classOf, 'manage')
  return <Tile colorClass={colorClass} key={`info-${ship}-manage`} col1={`Management Proxy`} col2={''} />

}

const infoVotingSeed = ship => {
  const classOf = ob.clan(ship)
  const colorClass = getColor(classOf, 'voting')
  return <Tile colorClass={colorClass} key={`info-${ship}-voting`} col1={`Voting Proxy`} col2={''} />
}



const infoSpawnSeed = ship => {
  const classOf = ob.clan(ship)
  const colorClass = getColor(classOf, 'spawn')
  return <Tile colorClass={colorClass} key={`info-${ship}-spawn`} col1={`Spawn Proxy`} col2={''} />
}



const infoMasterTicket = ship => {
  const classOf = ob.clan(ship);
  const colorClass = getColor(classOf, 'master');
  return <Tile colorClass={colorClass} key={`info-${ship}-master`} col1={`Master Ticket`} col2={''} />;
};



const infoMasterTicketShard = ship => {
  const classOf = ob.clan(ship);
  const colorClass = getColor(classOf, 'master');
  return [
    <Tile colorClass={colorClass} key={`info-${ship}-master-1`} col1={`Master Ticket Shard 1 of 3`} col2={''} />,
    <Tile colorClass={colorClass} key={`info-${ship}-master-2`} col1={`Master Ticket Shard 2 of 3`} col2={''} />,
    <Tile colorClass={colorClass} key={`info-${ship}-master-3`} col1={`Master Ticket Shard 3 of 3`} col2={''} />,
  ];
};



const Tile = (props) => {
  return (
    <div
      className={ `${props.colorClass} white row pl-4  text-mono` }
      style={{borderBottom:'2px solid black', height: '39px' }}
      key={props.key}>

      <div className={'col-md-8 flex align-center text-600'}>{props.col1}</div>
      <div className={'col-md-4 flex align-center text-500'}>{props.col2}</div>
    </div>
  )
}


const galaxyInfo = (ship, sig) =>
  <div className={'mt-8'} key={ 'wallet-' + ship }>
    { infoHeader(ship) }
    <div className={'row'} key={ ship + '-body' }>
      { infoSigil(ship, sig) }
      <div className={ 'col-md-7 ml-2' } key={ 'info-' + ship }>
        { infoMasterTicketShard(ship) }
        { infoSpawnSeed(ship) }
        { infoManagementSeed(ship) }
        { infoVotingSeed(ship) }
      </div>
    </div>
  </div>

const starInfo = (ship, sig) =>
  <div className={'mt-8'} key={ 'wallet-' + ship }>
    { infoHeader(ship) }
    <div className={'row'} key={ ship + '-body' }>
      { infoSigil(ship, sig) }
      <div className={ 'col-md-7 ml-2' } key={ 'info-' + ship }>
        { infoMasterTicket(ship) }
        { infoSpawnSeed(ship) }
        { infoManagementSeed(ship) }
      </div>
    </div>
  </div>

const planetInfo = (ship, sig) =>
  <div className={'mt-8'} key={ 'wallet-' + ship }>
    { infoHeader(ship) }
    <div className={'row'} key={ ship + '-body' }>
      { infoSigil(ship, sig) }
      <div className={ 'col-md-7 ml-2' } key={ 'info-' + ship }>
        { infoMasterTicket(ship) }
        { infoManagementSeed(ship) }
      </div>
    </div>
  </div>



const makeTicket = ship => {

  const bits = ship < MIN_STAR
    ? GALAXY_ENTROPY_BITS
    : ship < MIN_PLANET
      ? STAR_ENTROPY_BITS
      : PLANET_ENTROPY_BITS

  const bytes = bits / 8
  const some = new Uint8Array(bytes)
  window.crypto.getRandomValues(some)

  const gen = new more.Generator()

  return new Promise((resolve, reject) => {
    gen.generate(bits, result => {
      const chunked = lodash.chunk(result, 2)
      const desired = chunked.slice(0, bytes) // only take required entropy
      const more = lodash.flatMap(desired, arr => arr[0] ^ arr[1])
      const entropy = lodash.zipWith(some, more, (x, y) => x ^ y)
      const buf = Buffer.from(entropy)
      const patq = ob.hex2patq(buf.toString('hex'))
      resolve(patq)
      reject('Entropy generation failed')
    })
  })
}




const genWallet = async (ship, ticket, cb) => {

  const boot = ship < MIN_STAR || ship > MAX_STAR;

  const config = {
    ticket: ticket,
    seedSize: SEED_LENGTH_BYTES,
    ship: ship,
    password: '',
    revisions: {},
    boot: boot
  };

  const wallet = await kg.generateWallet(config);

  // This is here to notify the anyone who opens console because the thread
  // hangs, blocking UI updates so this cannot be doen in the UI
  console.log('Generating Wallet for ship address: ', ship);

  return wallet;
}





class Generate extends React.Component {
  constructor(props) {
    super(props)
    this.handleGenerate = this.handleGenerate.bind(this);
  }

  handleGenerate = async () => {
    const { props } = this;
    const { setGlobalState } = this.props;

    setGlobalState({ 'eny.state': GEN_STATES.ENY_PENDING });

    const ships = [
      ...props['profile.value'].galaxies,
      ...props['profile.value'].stars,
      ...props['profile.value'].planets,
    ];

    const enyPromises = ships.map(async ship => {
      return {
        ship,
        ticket: await makeTicket(ship),
      };
    });

    const enyTable = await Promise.all(enyPromises);

    setGlobalState({
      'eny.value': enyTable,
      'eny.state': GEN_STATES.ENY_SUCCESS,
      'wallets.state': GEN_STATES.DERIVATION_PENDING,
    });

    await this.forciblyExecuteArgon2Once(enyTable);

    const walletPromises = enyTable.map(async ({ ship, ticket }) => {
      return {
        ship,
        wallet: await genWallet(ship, ticket),
      };
    });

    const wallets = await Promise.all(walletPromises);

    const reshapedWallet = wallets.reduce((acc, {ship, wallet}) => ({...acc, [ship]: wallet }), {})

    setGlobalState({
      'wallets.value': reshapedWallet,
      'wallets.state': GEN_STATES.DERIVATION_SUCCESS,
      'paperCollateral.state': GEN_STATES.PAPER_PENDING,
    });
  }



  forciblyExecuteArgon2Once = async enyTable => {
    // NB (jtobin):
    //
    // following is some insane thing required so as not to run into bizarre
    // emscripten errors
    if (enyTable.length === 0) {
      throw new Error('no ship information provided')
    } else {
      let throwawayEntry = enyTable[0]
      // eslint-disable-next-line
      let throwaway = await genWallet(throwawayEntry.ship, throwawayEntry.ticket, () => {})
    };
  }



  render() {
    const { props } = this;
    const { setGlobalState } = this.props;

    const {
      ENY_NOSTART,
      ENY_PENDING,
      ENY_SUCCESS,
      ENY_FAILURE,
      DERIVATION_NOSTART,
      DERIVATION_PENDING,
      DERIVATION_SUCCESS,
      DERIVATION_FAILURE,
      PAPER_NOSTART,
      PAPER_PENDING,
      PAPER_SUCCESS,
      PAPER_FAILURE,
    } = GEN_STATES;

    const es = props['eny.state'];
    const ws = props['wallets.state'];
    const ps = props['paperCollateral.state'];


    const ALL_SUCCESS =
      es === ENY_SUCCESS &&
      ws === DERIVATION_SUCCESS &&
      ps === PAPER_SUCCESS;

    const NONE_START =
      es === ENY_NOSTART &&
      ws === DERIVATION_NOSTART &&
      ps === PAPER_NOSTART;

    const ANY_ERROR =
      es === ENY_FAILURE ||
      ws === DERIVATION_FAILURE ||
      ps === PAPER_FAILURE;

    const ANY_PENDING =
      es === ENY_PENDING ||
      ws === DERIVATION_PENDING ||
      ps === PAPER_PENDING;

    const genButtonClass = classnames({
      'bg-blue white': true,
      'bg-green noClick black': ALL_SUCCESS,
    });

    const entropyBarClassnames = classnames({
      'bg-blue': es === ENY_SUCCESS,
      'bg-lightBlue': es === ENY_PENDING,
      'bg-gray': es === ENY_NOSTART,
      'bg-orange': es === ENY_FAILURE,
      'bg-green': ALL_SUCCESS,
    });

    const walletsBarClassnames = classnames({
      'bg-blue': ws === DERIVATION_SUCCESS,
      'bg-lightBlue': ws === DERIVATION_PENDING,
      'bg-gray': ws === DERIVATION_NOSTART,
      'bg-orange': ws === DERIVATION_FAILURE,
      'bg-green': ALL_SUCCESS,
    });

    const paperBarClassnames = classnames({
      'bg-blue': ps === PAPER_SUCCESS,
      'bg-lightBlue': ps === PAPER_PENDING,
      'bg-gray': ps === PAPER_NOSTART,
      'bg-orange': ps === PAPER_FAILURE,
      'bg-green': ALL_SUCCESS,
    });

    const isGenerateButtonDisabled = () => {
      if (NONE_START === true) return false;
      if (ANY_PENDING === true) return true;
      if (ANY_ERROR === true) return false;
      if (ALL_SUCCESS === true) return true;
    };

    const getGenButtonText = () => {
      // const N = props['wallets.genCounter'] + 1;
      // const X = props['eny.value'].length;
      let r = '';
      if (NONE_START === true) r = 'Generate All';
      if (es === ENY_PENDING) r = 'Generating Entropy';
      // if (ws === DERIVATION_PENDING) r = `Generating Wallet ${N} / ${X}`;
      if (ws === DERIVATION_PENDING) r = `Generating Wallets`;
      if (ps === PAPER_PENDING) r = 'Making Paper Collateral';
      if (ALL_SUCCESS === true) r = 'Success.';
      if (ANY_ERROR === true) r = 'Try Again';
      return r;
    }

    const disableGenerateButton = isGenerateButtonDisabled();
    const genText = getGenButtonText();

    const nextButtonClass = classnames({
      'bg-blue white': ALL_SUCCESS === true,
      'bg-gray black': ALL_SUCCESS !== true,
    })

    const nextButtonDisabled = ws !== ALL_SUCCESS;

    return(
      <div className={'row'}>
      <div className={'col-md-8'}>
        <div className={'col-md-8'}>
          <h2>{`Review your paper wallet storage recommendations.`}</h2>
          <p>
            {`Each ship is placed into its own wallet with proxies that differ in
            importance and security requirements. These are listed as examples below. A key to our security recommendations can be found to the right of the page.`}
          </p>
        </div>

        { props['profile.value'].galaxies.map(ship => shipInfo(ship)) }
        { props['profile.value'].stars.map(ship => shipInfo(ship)) }
        { props['profile.value'].planets.map(ship => shipInfo(ship)) }

      </div>

      <div className="col-md-3 col-md-offset-1 mt-9">
        <div className="fixed" style={{width: '230px'}}>
          <div className="col-md-12 bg-very-high h-2 mt-4"></div>
          <h4 className="text-600 mt-2">Very High Friction</h4>
          <p className="text-sm" style={{lineHeight: '16px'}}>
            Extremely valuable. Cold storage on a 3 part sharded paper wallet. Store each shard in a separate geographic location with protection against fire, water and other elements.
          </p>
          <div className="col-md-12 bg-high h-2 mt-4"></div>
          <h4 className="text-600 mt-2">High Friction</h4>
          <p className="text-sm" style={{lineHeight: '16px'}}>
            Very valuable. Cold storage on a paper wallet in a different location than your computer, such as a safe.
          </p>
          <div className="col-md-12 bg-medium h-2 mt-4"></div>
          <h4 className="text-600 mt-2">Medium Friction</h4>
          <p className="text-sm" style={{lineHeight: '16px'}}>
            Store cold in a paper wallet; can be stored in a desk drawer in a trusted environment.
          </p>
          <div className="col-md-12 bg-low h-2 mt-4"></div>
          <h4 className="text-600 mt-2">Low Friction</h4>
          <p className="text-sm" style={{lineHeight: '16px'}}>
            Ok to store hot on a trusted networked computer.
          </p>
        </div>
      </div>

      <div className={'col-md-9 btn-tray col-'}>
        <h3>{"Got it?  Then it's time to generate your wallets."}</h3>
        <p className={'col-md-8'}>{"If you have a large number of ships, this may take several minutes and the page may hang or become unresponsive. If you close this browser window, you will have to start from the beginning."}</p>

        <div className={'flex h-12 mt-8 mb-4'}>
          <Button
            className={ `${genButtonClass} b-r-1-black w-50 m-0` }
            text={genText}
            onClick={ this.handleGenerate }
            disable={disableGenerateButton} />
          <div className={`${entropyBarClassnames} f-1 b-r-1-black`} />
          <div className={`${walletsBarClassnames} f-3 b-r-1-black`} />
          <div className={`${paperBarClassnames} f-3 b-r-1-black`} />
          <Button
            className={ `${nextButtonClass} m-0` }
            text={'View wallets →'}
            disable={ nextButtonDisabled }
            onClick= { () => setGlobalState({ route: '/Download' , 'currentStep': NEXT_STEP_NUM })} />
        </div>
      </div>

        <div className={'extremely-hidden'}>
          <div className={'text-300'}>{'text-300'}</div>
          <div className={'text-400'}>{'text-400'}</div>
          <div className={'text-500'}>{'text-500'}</div>
          <div className={'text-600'}>{'text-600'}</div>
          <div className={'text-400 text-mono'}>{'text-400 text-mono'}</div>
          <div className={'text-600 text-mono'}>{'text-600 text-mono'}</div>
          <div className={'text-500 h-font'}>{'text-500 h-font'}</div>
          <div className={'text-600 h-font'}>{'text-600 h-font'}</div>
        </div>

        { props['wallets.state'] === GEN_STATES.DERIVATION_SUCCESS
          ? <PaperCollateralRenderer
            wallet={props['wallets.value']}
            className={'extremely-hidden'}
            callback={data => setGlobalState({
              'paperCollateral.value': data,
              'paperCollateral.state': GEN_STATES.PAPER_SUCCESS
            })}
            mode={'REGISTRATION'} />
          : <div />
        }

      </div>
    )
  }
}

export default Generate