import * as React from "react";

import {
  useDataItemHistory,
  useWidgetDataItem,
  useWidgetDataItemHistoryOptions,
  useWidgets,
  LinkedDataItemPicker,
  LinkedDataItemHistoryOptionsPicker,
  WidgetComponent,
  DataSidebar,
  WidgetCreationModal,
} from "..";

import { Button, Drawer, Select } from "antd";

const selectStyle = { width: "100%", marginBottom: 20 };
const buttonStyle = { marginRight: 10 };

interface Props {}

export const OpenDashWidgetDevRoute: React.FC<Props> = () => {
  const widgets = useWidgets();

  const [settings, setSettings] = React.useState({
    dataDrawer: false,
    linkedDataDrawer: false,
    selectWidgetModal: false,
    selectedWidget: null,
    widgetFullscreen: false,
    presets: false,
    width: 2,
    height: 2,
  });

  return (
    <div style={{ padding: 20 }}>
      <h1>Widget Development</h1>

      <Select
        style={{ ...buttonStyle, width: 400 }}
        value={settings.selectedWidget}
        onChange={value =>
          setSettings(current => ({ ...current, selectedWidget: value }))
        }
      >
        {widgets.map(widget => (
          <Select.Option key={widget.id} value={widget.id}>
            {widget.name} ({widget.type})
          </Select.Option>
        ))}
      </Select>

      <Select
        style={{ ...buttonStyle, width: 80 }}
        value={settings.width}
        onChange={value =>
          setSettings(current => ({ ...current, width: value }))
        }
      >
        {Array.from(Array(24)).map((e, i) => (
          <Select.Option key={i + 1} value={i + 1} children={i + 1} />
        ))}
      </Select>

      <Select
        style={{ ...buttonStyle, width: 80 }}
        value={settings.height}
        onChange={value =>
          setSettings(current => ({ ...current, height: value }))
        }
      >
        {Array.from(Array(24)).map((e, i) => (
          <Select.Option key={i + 1} value={i + 1} children={i + 1} />
        ))}
      </Select>

      <Button
        style={buttonStyle}
        onClick={e => {
          setSettings(current => ({
            ...current,
            linkedDataDrawer: !current.linkedDataDrawer,
          }));
        }}
      >
        Linked Data
      </Button>

      <Button
        style={buttonStyle}
        onClick={e => {
          setSettings(current => ({
            ...current,
            dataDrawer: !current.dataDrawer,
          }));
        }}
      >
        Source + Data Items
      </Button>

      <Button
        style={buttonStyle}
        onClick={e => {
          setSettings(current => ({
            ...current,
            presets: !current.presets,
          }));
        }}
      >
        Add Widget
      </Button>

      <Drawer
        title="Linked Data"
        visible={settings.linkedDataDrawer}
        width={600}
        onClose={e => {
          setSettings(settings => ({
            ...settings,
            linkedDataDrawer: !settings.linkedDataDrawer,
          }));
        }}
      >
        <LinkedDataDrawer></LinkedDataDrawer>
      </Drawer>

      <DataSidebar
        open={settings.dataDrawer}
        close={() => {
          setSettings(settings => ({
            ...settings,
            dataDrawer: false,
          }));
        }}
      ></DataSidebar>

      <WidgetCreationModal
        open={settings.presets}
        close={() => {
          setSettings(settings => ({
            ...settings,
            presets: false,
          }));
        }}
      ></WidgetCreationModal>

      <div
        style={{
          marginTop: 20,
          position: "relative",
          width: `calc(((100vw - 40px) / 24) * ${settings.width})`,
          height: `calc(((100vw - 40px) / 24) * ${settings.height})`,
        }}
      >
        <WidgetComponent
          id={settings.selectedWidget}
          fullscreen={settings.widgetFullscreen}
        ></WidgetComponent>
      </div>
    </div>
  );
};

function LinkedDataDrawer() {
  const [item, dimension] = useWidgetDataItem();
  const [options] = useWidgetDataItemHistoryOptions();

  const history = useDataItemHistory(item, options);

  return (
    <>
      <LinkedDataItemPicker style={selectStyle}></LinkedDataItemPicker>
      <LinkedDataItemHistoryOptionsPicker
        style={selectStyle}
      ></LinkedDataItemHistoryOptionsPicker>
      <h1>Item</h1>
      <pre>{JSON.stringify(dimension, null, "  ")}</pre>
      <pre>{JSON.stringify(item, null, "  ")}</pre>
      <h1>History</h1>
      <pre>{JSON.stringify(history, null, "  ")}</pre>
    </>
  );
}