import React from 'react';
import styled from 'styled-components';
import { action } from '@storybook/addon-actions';
import { Route, Routes, useLocation } from 'react-router';
import { Link, Typography } from '../..';
import { Provider } from '../../common/Links/ReactRouterLinkHelper';
import { Display } from '../../common/Display';
export default {
  title: 'Molecules / Link',
  parameters: {
    component: Link
  }
};
var ExampleBlackBackground = styled.div.withConfig({
  displayName: "Linkstories__ExampleBlackBackground",
  componentId: "sc-6q09pr-0"
})(["background:", ";"], function (p) {
  return p.theme.color.backgroundDark;
});
var View = function View() {
  var location = useLocation();
  return React.createElement("pre", null, React.createElement("code", null, JSON.stringify(location, null, 2)));
};
export var DefaultUsage = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(Link, {
      to: "/route1",
      onClick: action('clicked')
    }, "Link1")), React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(Link, {
      to: "/route2",
      onClick: action('clicked')
    }, "Link2")), React.createElement(Routes, null, React.createElement(Route, {
      path: "/:id",
      element: React.createElement(View, null)
    })));
  },
  name: 'Default usage'
};
export var WithTypographyPrimaryAsType = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Typography, {
      type: "primary",
      weight: "bold"
    }, React.createElement(Link, {
      to: "/route1",
      onClick: action('clicked')
    }, "Link1")), React.createElement(Typography, {
      type: "primary",
      weight: "bold"
    }, React.createElement(Link, {
      to: "/route2",
      onClick: action('clicked')
    }, "Link2")), React.createElement(Routes, null, React.createElement(Route, {
      path: "/:id",
      element: React.createElement(View, null)
    })));
  },
  name: 'With typography primary as type'
};
export var ExternalLinkWithItsDefaultValues = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(Link, {
      to: "https://example.com",
      onClick: action('clicked'),
      external: true
    }, "Example external link")));
  },
  name: 'External link with its default values'
};
export var FullServerRedirectLinkWithItsDefaultValues = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(Link, {
      to: "https://example.com",
      onClick: action('clicked'),
      fullServerRedirect: true
    }, "Example full server redirect link")));
  },
  name: 'Full server redirect link with its default values'
};
export var ExternalLinkWithRelAndTargetOverriden = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(Link, {
      to: "https://example.com",
      onClick: action('clicked'),
      rel: "nofollow",
      target: "_self",
      external: true
    }, "Example external link")));
  },
  name: 'External link with rel and target overriden'
};
export var WithDisabledPropResultsInADisabledButtonLookingLikeALink = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(Link, {
      onClick: action('clicked'),
      disabled: true
    }, "Link")));
  },
  name: 'With disabled prop results in a disabled button looking like a link'
};
export var WithoutToPropResultsInAButtonLookingLikeALink = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(Link, {
      onClick: action('clicked')
    }, "Link")));
  },
  name: 'Without to prop results in a button looking like a link'
};
export var WithColor = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Display, {
      items: [{
        title: 'Black',
        component: React.createElement(Typography, {
          type: "primary"
        }, React.createElement(Link, {
          color: "black",
          to: "https://example.com",
          external: true,
          onClick: action('clicked')
        }, "Link"))
      }, {
        title: 'Blue',
        component: React.createElement(Typography, {
          type: "primary"
        }, React.createElement(Link, {
          color: "blue",
          to: "https://example.com",
          external: true,
          onClick: action('clicked')
        }, "Link"))
      }, {
        title: 'Inherit',
        component: React.createElement(ExampleBlackBackground, null, React.createElement(Typography, {
          type: "primary",
          color: function color(t) {
            return t.color.textLight;
          }
        }, React.createElement(Link, {
          color: "inherit",
          to: "https://example.com",
          external: true,
          onClick: action('clicked')
        }, "Link")))
      }]
    }));
  },
  name: 'With color prop'
};
export var WithDisplay = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Display, {
      items: [{
        title: 'Link',
        component: React.createElement(Typography, {
          type: "primary"
        }, React.createElement(Link, {
          display: "block",
          to: "https://example.com",
          external: true,
          onClick: action('clicked')
        }, "Link"))
      }, {
        title: 'Button',
        component: React.createElement(Typography, {
          type: "primary"
        }, React.createElement(Link, {
          display: "block",
          onClick: action('clicked')
        }, "Link"))
      }]
    }));
  },
  name: 'With display prop'
};
export var WithUnderline = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Display, {
      items: [{
        title: 'Link',
        component: React.createElement(Typography, {
          type: "primary"
        }, React.createElement(Link, {
          to: "https://example.com",
          external: true,
          underlined: true,
          onClick: action('clicked')
        }, "Link"))
      }, {
        title: 'Button',
        component: React.createElement(Typography, {
          type: "primary"
        }, React.createElement(Link, {
          onClick: action('clicked'),
          underlined: true
        }, "Link"))
      }]
    }));
  }
};