// Libraries
// import {
// FormControl,
// FormControlLabel,
// Input,
// MenuItem,
// Select,
// } from "@mui/material";
import { Input, MenuItem, Select } from "@mui/material";
import React, { useState } from "react";

// Components
import {
  // RenderWorkspace,
  Workspace,
  // SettingInputTypeDatePicker,
  // SettingInputTypeRadio,

  SettingsInputType,
  // Preview,
} from "../../components/index";
import { SettingInputTypeDatePicker } from "./components/Organisms";
// import {
// SettingInputTypeDatePicker,
// SettingInputTypeRadio,
// } from "./components/Organisms";

const initial = [
  {
    id: "oi2urw",
    sections: [
      {
        id: 74396,
        type: 1,
        properties: {
          label: "City",
          internalName: "City",
          description: null,
          isRequired: false,
          isDefault: true,
          icon: "icon-ants-double-three-dots",
        },
        score: 4,
        isDefaultField: true,
        defaultFieldId: 1,
        componentEl: (props) => (
          <Input
            {...props}
            onChange={(e) =>
              props.onChange({
                value: e.target.value,
                infor: props.infor,
              })
            }
            style={{ width: "100%",  zIndex: 10000  }}
          ></Input>
        ),
      },
      {
        id: 74011,
        type: 1,
        properties: {
          label: "Email1",
          internalName: "Email1",
          description: null,
          isRequired: false,
          isDefault: true,
          icon: "icon-ants-double-three-dots",
        },
        score: 4,
        isDisabled: false,
        isDefaultField: true,
        defaultFieldId: 3,
        componentEl: (props) => {
          console.log("props", props);
          return (
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={props.value}
              label="Age"
              onChange={(e) => {
                props.onChange({ value: e.target.value, infor: props.infor });
              }}
              style={{zIndex: 10000}}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={11}>11</MenuItem>
              <MenuItem value={12}>12</MenuItem>
            </Select>
          );
        },
      },
      {
        id: 79411,
        type: 1,
        properties: {
          label: "Email1",
          internalName: "Email1",
          description: null,
          isRequired: false,
          isDefault: true,
          icon: "icon-ants-double-three-dots",
        },
        score: 4,
        isDisabled: false,
        isDefaultField: true,
        defaultFieldId: 3,
        componentEl: (props) => {
          console.log("props", props);
          return (
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={props.value}
              label="Age"
              onChange={(e) => {
                props.onChange({ value: e.target.value, infor: props.infor });
              }}
              style={{zIndex: 10000}}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={11}>11</MenuItem>
              <MenuItem value={12}>12</MenuItem>
            </Select>
          );
        },
      },
    ],
  },
  {
    id: "h88f4l",
    sections: [
      {
        id: 74411,
        type: 1,
        properties: {
          label: "Email1",
          internalName: "Email1",
          description: null,
          isRequired: false,
          isDefault: true,
          icon: "icon-ants-double-three-dots",
        },
        score: 4,
        isDisabled: false,
        isDefaultField: true,
        defaultFieldId: 3,
        componentEl: (props) => {
          console.log("props", props);
          return (
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={props.value}
              label="Age"
              onChange={(e) => {
                props.onChange({ value: e.target.value, infor: props.infor });
              }}
              style={{ zIndex: 10000 }}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={11}>11</MenuItem>
              <MenuItem value={12}>12</MenuItem>
            </Select>
          );
        },
      },
      {
        id: 74412,
        type: 1,
        properties: {
          label: "Last name",
          internalName: "Last name",
          description: null,
          isRequired: false,
          isDefault: true,
          icon: "icon-ants-double-three-dots",
        },
        score: 4,
        isDisabled: false,
        isDefaultField: true,
        defaultFieldId: 6,
        componentEl: (props) => (
          <Input
            {...props}
            onChange={(e) =>
              props.onChange({
                value: e.target.value,
                infor: props.infor,
              })
            }
            style={{ width: "100%",  zIndex: 10000  }}
          ></Input>
        ),
      },
    ],
  },
  {
    id: "h88f42O",
    sections: [
      {
        id: 7498,
        type: 1,
        properties: {
          label: "Email",
          internalName: "Email",
          description: null,
          isRequired: false,
          isDefault: true,
          icon: "icon-ants-double-three-dots",
        },
        score: 4,
        isDisabled: false,
        isDefaultField: true,
        defaultFieldId: 3,
        componentEl: (props) => (
          <Input
            {...props}
            onChange={(e) =>
              props.onChange({
                value: e.target.value,
                infor: props.infor,
              })
            }
            style={{ width: "100%",  zIndex: 10000  }}
          ></Input>
        ),
      },
    ],
  },
  {
    id: "h88f4O3",
    sections: [
      {
        id: 74984,
        type: 1,
        properties: {
          label: "Email2",
          internalName: "Email",
          description: null,
          isRequired: false,
          isDefault: true,
          icon: "icon-ants-double-three-dots",
        },
        score: 4,
        isDisabled: false,
        isDefaultField: true,
        defaultFieldId: 3,
        componentEl: (props) => (
          <Input
            {...props}
            onChange={(e) =>
              props.onChange({
                value: e.target.value,
                infor: props.infor,
              })
            }
            style={{ width: "100%",  zIndex: 10000  }}
          ></Input>
        ),
      },
    ],
  },
  {
    id: "h88f4O1",
    sections: [
      {
        id: 7498123,
        type: 1,
        properties: {
          label: "Email1",
          internalName: "Email",
          description: null,
          isRequired: false,
          isDefault: true,
          icon: "icon-ants-double-three-dots",
        },
        score: 4,
        isDisabled: false,
        isDefaultField: true,
        defaultFieldId: 3,
        componentEl: (props) => (
          <Input
            {...props}
            onChange={(e) =>
              props.onChange({
                value: e.target.value,
                infor: props.infor,
              })
            }
            style={{ width: "100%",  zIndex: 10000  }}
          ></Input>
        ),
      },
    ],
  },
];

const initialDropdown = [
  {
    id: '1',
    value: 'antsomi',
    isPreSelect: true,
    label: 'Antsomi',
    associates: {
      brand: '',
      country: ''
    }
  },
  {
    id: '2',
    value: 'cdp',
    isPreSelect: false,
    label: 'CDP'
  },
  {
    id: '3',
    value: 'insight',
    isPreSelect: false,
    label: 'Insight'
  },
];

const options = [
  {value: 'brand', label: "Brand"},
  {value: 'country', label: "Country"},
]

// const initial = [
//   {
//     id: "1",
//     value: "",
//     isPreSelect: false,
//     label: "Phong1",
//   },
//   {
//     id: "1",
//     value: "",
//     isPreSelect: false,
//     label: "",
//   },
// ];

// const initData = [
//   { value: "male", label: "", isPreSelect: false },
//   { value: "female", label: "FeMale", isPreSelect: true },
// ];

const FormDesignExample = () => {
  const [moment, setMoment] = useState("2022-10-17T12:01:00+07:00");

  const callback = (type, data) => {
    switch (type) {
      case "DATA_WORKSPACE_DND":
        break;
      case "SETTING_INPUT_TYPE_DATE_PICKER":
        setMoment(data.momentDateTime);
        break;

      default:
        break;
    }
  };

  return (
    <>
      {/* <Preview
        type="datePicker"
        initData={initData}
        label="Gender"
        alignment="horizontal"
        momentDateTime={new Date()}
        dateType="DD_MM_YYYY_HH_MM_SS"
        callback={() => {}}
      /> */}
      <Workspace workspaces={initial} callback={callback} />
      <SettingInputTypeDatePicker
        dateType="YYYY"
        momentDateTime={"2022-10-17T12:01:00+07:00"}
        callback={callback}
        design="input"
      />
      <SettingInputTypeDatePicker
        dateType="YYYY"
        momentDateTime={moment}
        callback={callback}
        design="input"
      />
      {/* <SettingInputTypeRadio callback={callback} initData={initial} /> */}
      {/* <button onClick={() => setTriggerSave(true)}>Save</button>
      <SettingsInputType
        callback={callback}
        initData={initial}
        triggerSave={triggerSave}
      /> */}
      {/* <RenderWorkspace workspaces={initial} callback={callback} /> */}
      <div style={{width: 700, marginLeft: 50, marginBottom: 50}}>
        <SettingsInputType callback={callback} initData={initialDropdown} Components={{}} associateOptions={options} />
      </div>
    </>
  );
};

export default FormDesignExample;