import * as React from "react";
import type { ComponentStory, ComponentMeta } from "@storybook/react";
import { LayoutMap } from "../src";
import { within, userEvent, fireEvent, getByTestId } from "@storybook/testing-library";
import { expect } from "@storybook/jest";

export default {
  title: "lib/LayoutMap",
  component: LayoutMap,
  parameters: {
    layout: "fullscreen"
  }
} as ComponentMeta<typeof LayoutMap>;

const Template: ComponentStory<typeof LayoutMap> = args => {
  return <LayoutMap {...args} />;
};

export const Normal = Template.bind({});

const Ticker = props => {
  return (
    <div style={defaultStyles()}>
      <div>T</div>
      <div className={"aax-draggableHandle"} data-testid="ticker-aax-draggableHandle">
        Draggable Area .aax-draggableHandle
      </div>
    </div>
  );
};

const TradingView = props => {
  return (
    <div style={defaultStyles()}>
      <div>V</div>
      <div className={"draggableHandle"} data-testid="tradingView-draggableHandle">
        Draggable Area .draggableHandle
      </div>
      <div
        onMouseDown={e => {
          props.onResizeHandle();
        }}
      >
        ResizeHandle
      </div>
    </div>
  );
};

const Entrust = props => {
  return (
    <div style={defaultStyles()} data-testid="entrust">
      <div>E</div>
      <div className={"draggableHandle"}>Draggable Area .draggableHandle</div>
    </div>
  );
};
const defaultStyles = () => ({ color: "#fff", height: "100%", background: `rgba(1, 1, 1, ${Math.random()})` });

export const Controls = Template.bind({});
Controls.args = {
  responsiveGridLayoutProps: {
    draggableHandle: ".draggableHandle"
  },
  layoutsCacheName: "testOfWebExchangeInteractionsCache",
  views: {
    T: <Ticker />,
    V: <TradingView />,
    E: <Entrust />,
    L: (
      <div style={defaultStyles()} data-testid="latest">
        L
      </div>
    ),
    O: (
      <div style={defaultStyles()} data-testid="orderList">
        O
      </div>
    ),
  }
};

export const Interactions = Template.bind({});
Interactions.args = {
  responsiveGridLayoutProps: {
    draggableHandle: ".draggableHandle"
  },
  layoutsCacheName: "testOfWebExchangeInteractionsCache",
  views: {
    T: <Ticker />,
    V: <TradingView />,
    E: <Entrust />,
    L: (
      <div style={defaultStyles()} data-testid="latest">
        L
      </div>
    ),
    O: (
      <div style={defaultStyles()} data-testid="orderList">
        O
      </div>
    ),
  }
};
Interactions.play = async ({ canvasElement }) => {
  // Starts querying the component from its root element
  const canvas = within(canvasElement);

  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
  await userEvent.click(canvas.getByTestId("ticker-aax-draggableHandle"));
  await userEvent.dblClick(canvas.getByTestId("tradingView-draggableHandle"));
  await userEvent.click(canvas.getByTestId("entrust"));

  // 👇 Assert DOM structure
  // await expect(
  //   canvas.getByText(
  //     'Everything is perfect. Your account is ready and we should probably get you started!'
  //   )
  // ).toBeInTheDocument();
};