import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import React, { useCallback, useState } from 'react';
import { Link, MemoryRouter, Route, Switch } from 'react-router-dom';
import {
  NavigationAwareStation,
  NavigationAwareStationProps,
} from './NavigationAwareStation';

const meta: Meta<NavigationAwareStationProps> = {
  title: 'Other Components/NavigationAwareStation',
  component: NavigationAwareStation,
};
export default meta;

export const Configurable: StoryObj<NavigationAwareStationProps> = {
  args: {
    restrictNavigation: false,
  },
  render: (args) => {
    const Station: React.FC = () => {
      const [onNavigateResult, setOnNavigateResult] = useState(false);

      const onNavigate = useCallback(() => {
        action('onNavigate called, returning')(onNavigateResult);
        return onNavigateResult;
      }, [onNavigateResult]);

      return (
        <NavigationAwareStation {...args} onNavigate={onNavigate}>
          <div
            style={{
              maxWidth: 700,
              lineHeight: 1.5,
            }}
          >
            <h1>Page</h1>
            <p>
              This page simulates a station that will restrict navigation
              whenever <code>restrictNavigation</code> is <code>true</code> (use
              the <code>Controls</code> panel to set the value).
            </p>
            <p>
              When navigation is restricted, it will warn users when an external
              link is clicked to prevent them from leaving the page.
            </p>
            <p>
              For internal links, the component will call the{' '}
              <code>onNavigate</code> callback when a navigation is triggered.
              This method gives the station the chance to perform e.g. a save
              operation and decide whether the navigation should be allowed or
              not. If the method returns <code>true</code>, the navigation will
              be allowed. If it returns <code>false</code>, the navigation will
              be prevented.
            </p>
            <p>
              In this station the return value of <code>onNavigate</code> can be
              configured using the dropdown with this control:{' '}
              <select
                value={String(onNavigateResult)}
                onChange={(e) => {
                  setOnNavigateResult(e.target.value === 'true');
                }}
              >
                <option value="true">True</option>
                <option value="false">False</option>
              </select>
            </p>
            <p>Use these links to test the behavior:</p>
            <ul>
              <li>
                External Link: <a href="https://www.axinom.com">Axinom</a>
              </li>
              <li>
                Internal Link: <Link to="/linked">another page</Link>
              </li>
            </ul>
          </div>
        </NavigationAwareStation>
      );
    };

    return (
      <MemoryRouter>
        <Switch>
          <Route exact path="/" component={Station} />
          <Route exact path="/linked" render={() => <Link to="/">back</Link>} />
        </Switch>
      </MemoryRouter>
    );
  },
};
