import * as React from "react";
import List from "./component";
import { Container } from "@sc/plugins/webcomponents/v2";
import { themeSettings } from "@sc/plugins/webcomponents/v2/theme";
// import checkmark from "@sc/lsvt/src/images/checkmark.png";

import settings from "./settings";
// import settings from "../FormBuilder/settings";
import {
  sampleContentData,
  EditorWithCustomData,
  mobileStateData,
} from "@sc/modules/page/Builder/Builder.stories";
import { LinkDisplayTypes } from "./types";
import { FormControlLabel, Radio, RadioGroup } from "@material-ui/core";

export default {
  title: "Plugins|Web Components/Medium/Navigation",
  component: List,
};

// const checkmark = require("@sc/lsvt/images/checkmark.png");

const style = {
  li: {
    color: themeSettings.default.darkTextColor,
    // backgroundImage: `url(${checkmark})`,
    backgroundPosition: "top left",
    backgroundRepeat: "no-repeat",
    marginBottom: 30,
    // marginTop: -2,
    textAlign: "left",
    padding: `5px 0 15px 60px`,
    fontSize: 20,
    fontFamily: "Tahoma",
  },
};

// export const Default: React.FC = () => {
//   return (
//     <Container style={{ padding: "0 20px 20px" }}>
//       <List data={settings.default.data} />
//     </Container>
//   );
// };
export const Default: React.FC = () => {
  const [linkDisplayType, setLinkDisplayType] = React.useState("");
  return (
    <RadioGroup
      aria-label="linkDisplay"
      name="linkDisplay"
      value={linkDisplayType}
      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
        e.stopPropagation();
        console.log(e.target.value);
        setLinkDisplayType(e.target.value as LinkDisplayTypes);
      }}
    >
      <div style={{ display: "flex" }}>
        <FormControlLabel
          value={LinkDisplayTypes.TEXT}
          control={<Radio />}
          label="Text Link"
        />
        <FormControlLabel
          value={LinkDisplayTypes.ICON}
          control={<Radio />}
          label="Icon"
        />
        <FormControlLabel
          value={LinkDisplayTypes.BUTTON}
          control={<Radio />}
          label="Button"
        />
      </div>
    </RadioGroup>
  );
};

export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      defaultMobileState={mobileStateData.desktop}
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};