import * as React from "react";
import styled from "styled-components";
import { get } from "lodash";
import { Grid } from "@material-ui/core";

import { CheckboxesProps, IListItem } from "../types";
import { EditorMode } from "../../../../Editor/types";
import { AttributeNames } from "@sc/modules/v2/CRUD/AttributeBuilder/types";
import { LiveFormFieldProps } from "../../LiveFormField/types";

import AttributeContainer from "@sc/modules/v2/CRUD/AttributeBuilder/AttributeContainer";
import SortableList from "@sc/modules/v2/CRUD/SortableList";

const CheckboxItem: React.FC<IListItem> = ({ id, label, key }) => {
  const [value, setValue] = React.useState<string>(label);
  return (
    <div
      style={{
        width: "100%",
        padding: 10,
        margin: 5,
        border: `1px solid #DDD`,
      }}
    >
      {/* {label} ({id}) */}
      <input
        tabIndex={key}
        style={{ background: "transparent", border: "none", fontSize: "13pt" }}
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
};

/**
 * A component that shows a LIVE list of checkboxes or tools for configuring the group of checkboxes look, feel, and behavior
 */
const Checkboxes: React.FC<CheckboxesProps> = (props) => {
  const {
    mode = EditorMode.LIVE,
    data = [],
    styles = {
      labelStyle: {},
      descriptionStyle: {},
      inputStyle: {},
      containerStyle: {},
      validationStyle: {},
      iconStyle: {},
    },
    name,
    label,
    description,
    defaultValue,
    disabled,
    icon,
    columns = 12,
    onChange = () => null,
    attributeContainerDataSettings = {},
  } = props;

  /**
   * Deals with any changes that comes from the various attributes that are loaded
   *
   * • Converts to LiveFormFieldProps shape
   * • Triggers (and passes along the mutated LiveFormFieldProps payload to) the onChange event
   * @params
   */
  const handleChange = (data: LiveFormFieldProps): void => {
    onChange(data); // <-- why does it need "mode" seeing as how it is called by a mode specific component (e.g. LiveFormField and EditFormField)
  };

  const {
    iconStyle = {},
    descriptionStyle = {},
    containerStyle = {},
    inputStyle = {},
    validationStyle = {},
    labelStyle = {},
  } = styles;
  return (
    <div data-testid="FormBuilder-FormFields-Checkboxes" style={containerStyle}>
      {mode === EditorMode.LIVE && (
        <div data-testid="FormBuilder-FormFields-Checkboxes-LIVE">
          {label && <div style={labelStyle}>{label}</div>}
          {description && <div style={descriptionStyle}>{description}</div>}
          {data.map(({ id, label }) => (
            <div
              key={id}
              data-testid="FormBuilder-FormFields-Checkboxes-Checkbox"
              style={inputStyle}
            >
              <input
                type="checkbox"
                onChange={(e) => handleChange({ checked: e.checked, id })}
                style={{ marginRight: 10 }}
              />
              <span>{label}</span>
            </div>
          ))}
        </div>
      )}
      {mode === EditorMode.EDITOR && (
        <div data-testid="FormBuilder-FormFields-Checkboxes-EDITOR">
          <AttributeContainer
            onChange={handleChange}
            attributes={props}
            data={[
              {
                id: "label",
                attribute: AttributeNames.LABEL,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "name",
                attribute: AttributeNames.FORMITEMNAME,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "description",
                attribute: AttributeNames.DESCRIPTION,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "columns",
                attribute: AttributeNames.COLUMNS,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "required",
                attribute: AttributeNames.REQUIRED,
                settings: {},
              },
            ]}
          >
            <SortableList
              // showCRUDOnHover={false}
              // style={{ width: 300 }}
              data={data}
              ItemComponent={(itm) => <CheckboxItem {...itm} />}
              // onAdd={() => setData([...data, { id: "5", firstName: "Crimson" }])}
              // onEdit={() => console.log("Edit Button Clicked")}
              // onChange={(updatedData) => setData(updatedData)}
              // onDelete={(payload, updatedData) => setData(updatedData)}
              canDragAndDrop
              // showDragHandle={false}
            />
          </AttributeContainer>
        </div>
      )}
    </div>
  );
};

export default Checkboxes;