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

import { TextAreaFieldProps } from "../types";
import { EditorMode } from "@sc/modules/v2/Editor/types";
import { AttributeContainer } from "@sc/modules/v2/CRUD/AttributeBuilder";
import { AttributeNames } from "@sc/modules/v2/CRUD/AttributeBuilder/types";
import IconSelector from "../../../../Properties/components/properties/IconSelector";
import { LiveFormFieldProps } from "../../LiveFormField/types";

/**
 * A component that shows a LIVE textarea input field or tools for configuring that textarea field's look, feel, and behavior
 */
const TextAreaField: React.FC<TextAreaFieldProps> = (props) => {
  const {
    mode = EditorMode.LIVE,
    placeholder,
    onChange = () => null,
    onBlur = () => null,
    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-TextAreaField"
      style={containerStyle}
    >
      {mode === EditorMode.LIVE && (
        <div data-testid="FormBuilder-FormFields-TextAreaField-LIVE">
          {label && <div style={labelStyle}>{label}</div>}
          {description && <div style={descriptionStyle}>{description}</div>}
          {icon && (
            <Icon type={icon} style={{ ...iconStyle, position: "absolute" }} />
          )}
          <textarea
            placeholder={placeholder}
            value={defaultValue}
            onChange={handleChange}
            onBlur={onBlur}
            style={{ ...inputStyle, ...(icon ? { paddingLeft: 40 } : {}) }}
          />
        </div>
      )}

      {mode === EditorMode.EDITOR && (
        <div data-testid="FormBuilder-FormFields-TextAreaField-EDITOR">
          <AttributeContainer
            onChange={handleChange}
            onBlur={onBlur}
            attributes={props}
            data={[
              {
                id: "label",
                attribute: AttributeNames.LABEL,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "placeholder",
                attribute: AttributeNames.PLACEHOLDER,
                settings: {},
              },
              {
                id: "description",
                attribute: AttributeNames.DESCRIPTION,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "name",
                attribute: AttributeNames.FORMITEMNAME,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "columns",
                attribute: AttributeNames.COLUMNS,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "required",
                attribute: AttributeNames.REQUIRED,
                settings: {},
              },
              {
                id: "initialvalue",
                attribute: AttributeNames.INITIALVALUE,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "iconSelector",
                attribute: AttributeNames.ICON,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
            ]}
          />
        </div>
      )}
    </div>
  );
};

export default TextAreaField;