import { boolean, select, text } from '@storybook/addon-knobs';
import { useState } from 'react';

import AvatarView from '../avatarView';
import Body from '../body';
import Button from '../button';
import { ProfileType, Typography } from '../common';
import Logo from '../logo';
import OverlayHeader from '../overlayHeader';

import FlowNavigation from './FlowNavigation';
import { lorem10 } from '../test-utils';
import Display from '../display';
import Sticky from '../sticky';

export default {
  component: FlowNavigation,
  title: 'Navigation/FlowNavigation',
};

export const Variants = () => {
  const [activeStep, setActiveStep] = useState(2);
  const [closed, setClosed] = useState(false);
  const profileType = select(
    'avatar',
    [ProfileType.PERSONAL, ProfileType.BUSINESS],
    ProfileType.PERSONAL,
  );
  const showCloseButton = boolean('show closeButton', true);
  const showMobileBackButton = boolean('show mobile backButton', true);
  const done = boolean('done', false);
  const avatarURL = text('avatarURL', '../tapestry-01.png');

  return !closed ? (
    <>
      <FlowNavigation
        avatar={!profileType ? null : <AvatarView profileType={profileType} />}
        logo={<Logo />}
        activeStep={activeStep}
        done={done}
        steps={[
          {
            label: 'Amount',
            hoverLabel: <strong>100 GBP</strong>,
            onClick: () => setActiveStep(0),
          },
          {
            label: 'You',
            hoverLabel: <>Elena Durante - elenadurante@test.com</>,
            onClick: () => setActiveStep(1),
          },
          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
          { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
          {
            label: 'Pay',
            hoverLabel: 'Enrico Gusso II',
            onClick: () => setActiveStep(4),
          },
        ]}
        onClose={showCloseButton ? () => setClosed(true) : undefined}
        onGoBack={
          showMobileBackButton
            ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
            : undefined
        }
      />

      <FlowNavigation
        done={done}
        activeStep={activeStep}
        steps={[
          {
            label: 'Amount',
            hoverLabel: (
              <>
                <div>
                  <strong>100 GBP</strong>
                </div>
                0.2351 ETH
              </>
            ),
            onClick: () => setActiveStep(0),
          },
          {
            label: 'You',
            hoverLabel: (
              <>
                <div>
                  <strong>Elena Durante</strong>
                </div>
                elenadurante@test.com
              </>
            ),
            onClick: () => setActiveStep(1),
          },
          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
          { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
          {
            label: 'Pay',
            hoverLabel: 'Enrico Gusso II',
            onClick: () => setActiveStep(4),
          },
        ]}
        onClose={showCloseButton ? () => setClosed(true) : undefined}
        onGoBack={
          showMobileBackButton
            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
            : undefined
        }
      />

      <FlowNavigation
        done={done}
        avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
        activeStep={activeStep}
        steps={[
          {
            label: 'Amount',
            hoverLabel: (
              <>
                <div>
                  <strong>100 GBP</strong>
                </div>
                0.2351 ETH
              </>
            ),
            onClick: () => setActiveStep(0),
          },
          {
            label: 'You',
            hoverLabel: (
              <>
                <div>
                  <strong>Elena Durante</strong>
                </div>
                elenadurante@test.com
              </>
            ),
            onClick: () => setActiveStep(1),
          },
          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
          { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
          {
            label: 'Pay',
            hoverLabel: 'Enrico Gusso II',
            onClick: () => setActiveStep(4),
          },
        ]}
        onClose={showCloseButton ? () => setClosed(true) : undefined}
        onGoBack={
          showMobileBackButton
            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
            : undefined
        }
      />

      {/* Instance of always `done` FlowNav for visual testing */}
      <FlowNavigation
        done
        avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
        activeStep={activeStep}
        steps={[
          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(0) },
          { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(1) },
          { label: 'Pay', hoverLabel: 'Enrico Gusso', onClick: () => setActiveStep(2) },
        ]}
        onClose={showCloseButton ? () => setClosed(true) : undefined}
        onGoBack={
          showMobileBackButton
            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
            : undefined
        }
      />

      <Body className="text-xs-center m-a-3">Content to test that the flow nav is centred</Body>

      <Button
        className="m-t-2"
        disabled={activeStep === 4}
        onClick={() => setActiveStep(activeStep + 1)}
      >
        Next Step
      </Button>
    </>
  ) : null;
};

export const SendFlow = () => {
  const [activeStep, setActiveStep] = useState(2);
  const steps = [
    {
      label: 'Recipient',
      onClick: handleStepClick(0),
    },
    {
      label: 'Amount',
      hoverLabel: (
        <>
          You send 100 GBP <br />
          You get 99.39 GBP{' '}
        </>
      ),
      ...(activeStep > 1 && { onClick: handleStepClick(1) }),
    },
    {
      label: 'Review',
      ...(activeStep > 2 && { onClick: handleStepClick(2) }),
    },
    {
      label: 'Pay',
      ...(activeStep > 3 && { onClick: handleStepClick(3) }),
    },
  ];
  function handleStepClick(step: number) {
    return () => {
      setActiveStep(step);
    };
  }
  return (
    <>
      <FlowNavigation
        avatar={<AvatarView />}
        logo={<Logo />}
        activeStep={activeStep}
        steps={steps}
        onClose={() => alert('close & move away')}
        onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
      />

      <Body className="m-a-3">
        <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
        <br />
        {lorem10}
      </Body>

      <Sticky>
        <div className="d-flex justify-content-center align-items-center p-a-3">
          <Button disabled={activeStep === 3} block onClick={() => setActiveStep(activeStep + 1)}>
            Continue
          </Button>
        </div>
      </Sticky>
    </>
  );
};

export const WithOverlayHeaderComparison = () => {
  const [activeStep, setActiveStep] = useState(4);
  const [closed, setClosed] = useState(false);
  const profileType = select(
    'avatar',
    [ProfileType.PERSONAL, ProfileType.BUSINESS],
    ProfileType.PERSONAL,
  );
  const showCloseButton = boolean('show closeButton', true);
  const showMobileBackButton = boolean('show mobile backButton', true);
  const done = boolean('done', false);

  return !closed ? (
    <>
      <div style={{ border: '1px solid #e8e8e8' }}>
        <FlowNavigation
          avatar={profileType ? <AvatarView profileType={profileType} /> : null}
          activeStep={activeStep}
          done={done}
          steps={[]}
          onClose={showCloseButton ? () => setClosed(true) : undefined}
          onGoBack={
            showMobileBackButton
              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
              : undefined
          }
        />
      </div>
      <div style={{ border: '1px solid #e8e8e8' }}>
        <OverlayHeader
          avatar={profileType ? <AvatarView profileType={profileType} /> : null}
          onClose={showCloseButton ? () => setClosed(true) : undefined}
        />
      </div>
    </>
  ) : null;
};
