import { Meta, StoryObj } from '@storybook/react-webpack5';
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 { lorem10 } from '../test-utils';
import Display from '../display';
import Sticky from '../sticky';

import FlowNavigation, { FlowNavigationProps } from './FlowNavigation';

interface CustomControls {
  showCloseButton: boolean;
  showMobileBackButton: boolean;
  avatarURL?: string;
  profileType?: ProfileType;
}
export type StoryArgs = FlowNavigationProps & CustomControls;

type Story = StoryObj<StoryArgs>;

const meta: Meta<StoryArgs> = {
  component: FlowNavigation,
  title: 'Navigation/FlowNavigation',
  argTypes: {
    showCloseButton: { control: 'boolean', defaultValue: true },
    showMobileBackButton: { control: 'boolean', defaultValue: true },
    done: { control: 'boolean', defaultValue: false },
    avatarURL: { control: 'text', defaultValue: '../tapestry-01.png' },
    profileType: {
      control: 'radio',
      options: [ProfileType.PERSONAL, ProfileType.BUSINESS],
      defaultValue: ProfileType.PERSONAL,
    },
  },
  parameters: {
    docs: {
      source: { type: 'code' },
    },
  },
};
export default meta;

type FlowNavArgs = {
  showCloseButton: boolean;
  showMobileBackButton: boolean;
  done: boolean;
  avatarURL?: string;
  profileType?: ProfileType;
  [key: string]: unknown;
};

export const Variants: Story = {
  args: {
    profileType: ProfileType.PERSONAL,
    showCloseButton: true,
    showMobileBackButton: true,
    done: false,
    avatarURL: '../tapestry-01.png',
  },
  render: (args) => {
    const [activeStep, setActiveStep] = useState(2);
    const [closed, setClosed] = useState(false);
    if (closed) return <></>;
    return (
      <>
        <FlowNavigation
          avatar={args.profileType ? <AvatarView profileType={args.profileType} /> : null}
          logo={<Logo />}
          activeStep={activeStep}
          done={args.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={args.showCloseButton ? () => setClosed(true) : undefined}
          onGoBack={
            args.showMobileBackButton
              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
              : undefined
          }
        />

        <FlowNavigation
          done={args.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={args.showCloseButton ? () => setClosed(true) : undefined}
          onGoBack={
            args.showMobileBackButton
              ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
              : undefined
          }
        />

        <FlowNavigation
          done={args.done}
          avatar={<AvatarView imgSrc={args.avatarURL} profileType={args.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={args.showCloseButton ? () => setClosed(true) : undefined}
          onGoBack={
            args.showMobileBackButton
              ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
              : undefined
          }
        />

        {/* Instance of always `done` FlowNav for visual testing */}
        <FlowNavigation
          done
          avatar={<AvatarView imgSrc={args.avatarURL} profileType={args.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={args.showCloseButton ? () => setClosed(true) : undefined}
          onGoBack={
            args.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>
      </>
    );
  },
};

export const SendFlow: Story = {
  args: {
    profileType: ProfileType.PERSONAL,
    showCloseButton: true,
    showMobileBackButton: true,
    done: false,
    avatarURL: '../tapestry-01.png',
  },
  render: (args) => {
    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
              v2
              disabled={activeStep === 3}
              block
              onClick={() => setActiveStep(activeStep + 1)}
            >
              Continue
            </Button>
          </div>
        </Sticky>
      </>
    );
  },
};

export const WithOverlayHeaderComparison: Story = {
  args: {
    profileType: ProfileType.PERSONAL,
    showCloseButton: true,
    showMobileBackButton: true,
    done: false,
    avatarURL: '../tapestry-01.png',
  },
  render: (args) => {
    const [activeStep, setActiveStep] = useState(4);
    const [closed, setClosed] = useState(false);
    if (closed) return <></>;
    return (
      <>
        <div style={{ border: '1px solid #e8e8e8' }}>
          <FlowNavigation
            avatar={args.profileType ? <AvatarView profileType={args.profileType} /> : null}
            activeStep={activeStep}
            done={args.done}
            steps={[]}
            onClose={args.showCloseButton ? () => setClosed(true) : undefined}
            onGoBack={
              args.showMobileBackButton
                ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
                : undefined
            }
          />
        </div>
        <div style={{ border: '1px solid #e8e8e8' }}>
          <OverlayHeader
            avatar={args.profileType ? <AvatarView profileType={args.profileType} /> : null}
            onClose={args.showCloseButton ? () => setClosed(true) : undefined}
          />
        </div>
      </>
    );
  },
};