import React from "react";
import {
  EditorWithCustomData,
  buildContentData,
  mobileStateData,
} from "@sc/modules/page/Builder/Builder.stories";

import _ from "lodash";

import {
  settings01,
  // settings02,
  // settings03,
  // settings04,
  // settings05,
  // settings06,
  // settings07,
  // settings08,
  // settings09,
  // settings10,
  // settings11,
  // settings12,
  // settings13,
  // settings14,
  // settings15,
  // settings16,
  // settings17,
  // settings18,
  // settings19,
  // settings20,
  // settings21,
  // settings22,
  // settings23,
  // settings24,
} from "@sc/plugins/misc/v2/blocks/weblayouts/Benefits";
import { ComponentTypes } from "@sc/plugins/webcomponents/v2/types";

function Test() {
  const [variables, setVariables] = React.useState([]);
  const [log, setLog] = React.useState([]);
  const [oldTime, setOldTime] = React.useState(Date.now());
  const [average, setAverage] = React.useState(0);
  return (
    <div>
      <EditorWithCustomData
        defaultMobileState={mobileStateData.desktop}
        content={buildContentData([
          settings01.default,
          // settings02.default,
          // settings03.default,
          // settings04.default,
          // settings05.default,
          // settings06.default,
          // settings07.default,
          // settings08.default,
          // settings09.default,
          // settings10.default,
          // settings11.default,
          // settings12.default,
          // settings13.default,
          // settings14.default,
          // settings15.default,
          // settings16.default,
          // settings17.default,
          // settings18.default,
          // settings19.default,
          // settings20.default,
          // settings21.default,
          // settings22.default,
          // settings23.default,
          // settings24.default,
        ])}
        log={(type, obj) => {
          setLog([...log, { type, obj, time: new Date() }]);
        }}
        onChangeState={(id, state, content) => {
          const item = content.filter((itm) => itm.id === id)[0];
          if (_.get(item, "type", false) === ComponentTypes.PICTURE) {
            setOldTime(Date.now());
            setVariables([
              ...variables,
              { time: (Date.now() - oldTime) / 1000, state },
            ]);
            setAverage(_.sumBy(variables.slice(1), "time") / variables.length);
          }
        }}
      />
      <div
        style={{
          position: "fixed",
          bottom: 20,
          left: 20,
          padding: 20,
          width: 500,
          background: `rgba(0,0,0,0.75)`,
          zIndex: 2000,
          color: "white",
        }}
      >
        {/* {variables.slice(1).map(({ time, state }) => (
          <pre>
            Time: {time} | State: {state}
          </pre>
        ))} */}
        {/* {log.map(({ type, time, obj }) => (
            <pre>
              Type: {type} | Message: {obj}
            </pre>
          ))} */}
        <div style={{ borderTop: "1px solid white", marginTop: 20 }} />
        <pre>{average.toFixed(3)} seconds</pre>
      </div>
    </div>
  );
}

export default Test;