import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cn from "classnames";
import React from "react";
import styled from "styled-components";
import Tradingview from "../tradingview";
import Orderbook from "./";
import { orders } from "./data.mock";
import { Arw } from "./icons";
const meta = {
    title: "Controls/Orderbook",
    component: Orderbook,
};
export default meta;
const Template = (props) => _jsx(Orderbook, { ...props });
export const Basic = Template.bind({});
Basic.args = {
    from: "BTC",
    to: "USD",
    sell: orders.sell,
    buy: orders.buy,
};
const Wrapper = styled.div `
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;

  .slide-container {
    overflow-x: hidden;
    width: 224px;
    transition: width 0.2s ease-in-out;

    &.hidden {
      width: 0;
    }
  }

  .toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 224px;
    top: 196px;
    height: 144px;
    width: 18px;
    background: #ccdae9;
    border-radius: 2px;
    transition: left 0.2s ease-in-out, background 0.2s ease-in-out;

    &.left {
      svg {
        transform: scaleX(-1);
        path {
          stroke: white;
        }
      }

      left: 0;
      background: #1792ff;
    }
  }

  .tradingview-external-widget {
  }
`;
export const WithTradingview = () => {
    const [show, setShow] = React.useState(true);
    return (_jsxs(Wrapper, { children: [_jsx("div", { className: cn("slide-container", { hidden: !show }), children: _jsx(Orderbook, { from: "BTC", to: "USD", sell: orders.sell, buy: orders.buy }) }), _jsx("div", { className: cn("toggle", { left: !show }), onClick: () => setShow((v) => !v), children: _jsx(Arw, {}) }), _jsx(Tradingview, { token: "Btc", width: show ? 600 : 824 })] }));
};
//# sourceMappingURL=index.stories.js.map