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

import RichEditor from "@sc/modules/v2/Editor/components/RichEditor";
import { ContentFieldProps } from "../types";
import { EditorMode } from "../../../../Editor/types";
import { AttributeContainer } from "@sc/modules/v2/CRUD/AttributeBuilder";
import { AttributeNames } from "@sc/modules/v2/CRUD/AttributeBuilder/types";
import { LiveFormFieldProps } from "../../LiveFormField/types";

/**
 * A component that shows LIVE text content.  Useful for breaking up pieces of form field content with just text explanations
 */
const ContentField: React.FC<ContentFieldProps> = (props) => {
  const {
    children,
    mode = EditorMode.LIVE,
    styles = {
      labelStyle: {},
      descriptionStyle: {},
      inputStyle: {},
      containerStyle: {},
      validationStyle: {},
      iconStyle: {},
    },
    name,
    label,
    description,
    defaultValue,
    disabled,
    icon,
    columns = 12,
    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);
  };

  const {
    iconStyle = {},
    descriptionStyle = {},
    containerStyle = {},
    inputStyle = {},
    validationStyle = {},
    labelStyle = {},
  } = styles;
  return (
    <div
      data-testid="FormBuilder-FormFields-ContentField"
      style={containerStyle}
    >
      {mode === EditorMode.LIVE && (
        <div data-testid="FormBuilder-FormFields-ContentField-LIVE">
          {children || defaultValue}
        </div>
      )}
      {mode === EditorMode.EDITOR && (
        <div data-testid="FormBuilder-FormFields-ContentField-EDITOR">
          <AttributeContainer
            onChange={handleChange}
            attributes={props}
            data={[
              // { id: "label", attribute: AttributeNames.LABEL, settings: {} },
              // {
              //   id: "description",
              //   attribute: AttributeNames.DESCRIPTION,
              //   settings: {
              // hide: true,
              // ...attributeContainerDataSettings,

              // },
              // },
              {
                id: "initialvalue",
                attribute: AttributeNames.INITIALVALUE,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "columns",
                attribute: AttributeNames.COLUMNS,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
            ]}
          >
            <RichEditor>{children || defaultValue}</RichEditor>
          </AttributeContainer>
        </div>
      )}
    </div>
  );
};

export default ContentField;