import { Meta } from "@storybook/react";
import { MapProps } from "./MapProps";
import Map from "./Map";

import {
  TileUrlTemplateArgs,
  MapLayers,
  MapShapeLayer,
  MapTileLayer,
  MapMarkerLayer,
} from "@progress/kendo-react-map";

export default {
  title: "Design System/Map",
  component: Map,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Map is a native KendoReact component built specifically for the React ecosystem by a company with 19+ years of experience in making enterprise-ready components and UI widgets. This results in React graphs that deliver lightning-fast performance and are highly customizable. \n\n```javascript\nimport { Map } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    children: {
      control: "text",
      description: "The children of the map component.",
    },
    center: {
      control: "object",
      description:
        "The center of the map. Coordinates are listed as [Latitude, Longitude].",
    },
    className: {
      control: "text",
      description: "Sets additional CSS classes to the component.",
    },
    controls: {
      control: "object",
      description: "Configuration for the built-in map controls.",
    },
    dir: {
      control: "text",
      description: "Represents the dir HTML attribute.",
    },
    maxZoom: {
      control: "number",
      description:
        "The maximum zoom level of the map. Typical web maps use zoom levels ranging from 0 (whole world) to 19 (sub-meter features).",
    },
    minZoom: {
      control: "number",
      description: "The minimum zoom level of the map.",
    },
    pannable: {
      control: "boolean",
      description: "If panning the map is allowed.",
    },
    style: {
      control: "object",
      description: "Sets the style of the map container.",
    },
    wraparound: {
      control: "boolean",
      description: "If the map wraps around the longitude.",
    },
    zoom: {
      control: "number",
      description: "The initial zoom level of the map.",
    },
    zoomable: {
      control: "boolean",
      description: "If zooming the map is allowed.",
    },
    onBeforeReset: {
      control: "function",
      description:
        "Fired immediately before the map is reset. This event is typically used for cleanup by layer implementers.",
    },
    onMapClick: {
      control: "function",
      description: "Fired when the user clicks on the map.",
    },
    onMarkerActivate: {
      control: "function",
      description:
        "Fired when a marker has been displayed and has a DOM element assigned.",
    },
    onMarkerClick: {
      control: "function",
      description: "Fired when a marker has been clicked or tapped.",
    },
    onMarkerCreated: {
      control: "function",
      description:
        "Fired when a marker has been created and is about to be displayed. Cancelling the event will prevent the marker from being shown.",
    },
    onPan: {
      control: "function",
      description: "Fired while the map viewport is being moved.",
    },
    onPanEnd: {
      control: "function",
      description: "Fires after the map viewport has been moved.",
    },
    onRefresh: {
      control: "function",
      description:
        "Fires when the Map is about to refresh. The event can be used to prevent the refresh of the Map in specific cases.",
    },
    onReset: {
      control: "function",
      description:
        "Fired when the map is reset. This typically occurs on initial load and after a zoom/center change.",
    },
    onShapeClick: {
      control: "function",
      description: "Fired when a shape is clicked or tapped.",
    },
    onShapeCreated: {
      control: "function",
      description: "Fired when a shape is created, but is not rendered yet.",
    },
    onShapeFeatureCreated: {
      control: "function",
      description: "Fired when a GeoJSON Feature is created on a shape layer.",
    },
    onShapeMouseEnter: {
      control: "function",
      description:
        "Fired when the mouse enters a shape. This event will fire reliably only for shapes that have set fill color. The opacity can still be set to 0 so the shapes appear to have no fill.",
    },
    onShapeMouseLeave: {
      control: "function",
      description:
        "Fired when the mouse leaves a shape. This event will fire reliably only for shapes that have set fill color. The opacity can still be set to 0 so the shapes appear to have no fill.",
    },
    onZoomEnd: {
      control: "function",
      description: "Fired when the map zoom level has changed.",
    },
    onZoomStart: {
      control: "function",
      description:
        "Fired when the map zoom level is about to change. Cancelling the event will prevent the user action.",
    },
  },
} as Meta;

export const Default = (args: MapProps): JSX.Element => {
  const tileSubdomains = ["a", "b", "c"];
  const tileUrl = (e: TileUrlTemplateArgs) =>
    `https://${e.subdomain}.tile.openstreetmap.org/${e.zoom}/${e.x}/${e.y}.png`;
  const attribution =
    '&copy; <a href="https://osm.org/copyright">OpenStreetMap contributors</a>';

  const geoShapes = [
    {
      type: "Polygon",
      coordinates: [
        [
          [-97.7409, 30.2675],
          [-97.7409, 30.2705],
          [-97.749, 30.2707],
          [-97.7494, 30.2686],
          [-97.7409, 30.2675],
        ],
      ],
    },
  ];
  const shapeStyle = {
    fill: {
      color: "#fff",
      opacity: 0.5,
    },
    stroke: {
      width: 3,
      color: "#bbb",
    },
  };

  const markers = [
    { latlng: [30.2675, -97.7409], name: "Zevo Toys" },
    { latlng: [30.2707, -97.749], name: "Foo Bars" },
    { latlng: [30.2705, -97.7409], name: "Mainway Toys" },
    { latlng: [30.2686, -97.7494], name: "Acme Toys" },
  ];

  return (
    <div>
      <Map {...args}>
        <MapLayers>
          <MapTileLayer
            urlTemplate={tileUrl}
            subdomains={tileSubdomains}
            attribution={attribution}
          />
          <MapShapeLayer data={geoShapes} style={shapeStyle} />
          <MapMarkerLayer
            data={markers}
            locationField="latlng"
            titleField="name"
          />
        </MapLayers>
      </Map>
    </div>
  );
};
Default.args = {
  dataTestId: "map-data-testid",
  center: [30.2686, -97.7494],
  zoom: 15,
};