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 { TextFieldProps } from "../types";
import { EditorMode } from "../../../../Editor/types";
import { AttributeNames } from "@sc/modules/v2/CRUD/AttributeBuilder/types";
import { LiveFormFieldProps, SProps } from "../../LiveFormField/types";

import { AttributeContainer } from "@sc/modules/v2/CRUD/AttributeBuilder";
import { FormFieldTypes } from "../../types";

const Inpt = styled.input<SProps>`
  &::placeholder {
    color: ${(p) => get(p.inputStyle, "color", "inherit")};
  }
  box-sizing: border-box;
`;

/**
 * A component that shows a LIVE text input field or tools for configuring the text input field's look, feel, and behavior
 */
const TextField: React.FC<TextFieldProps> = (props) => {
  // const [attributes, setAttributes] = React.useState<LiveFormFieldProps>(props);

  const {
    mode = EditorMode.LIVE,
    placeholder,
    disabled,
    styles = {
      labelStyle: {},
      descriptionStyle: {},
      inputStyle: {},
      containerStyle: {},
      validationStyle: {},
      iconStyle: {},
    },
    type,
    name,
    label,
    description,
    defaultValue,
    icon,
    columns = 12,
    isExpanded = false,
    onChange = () => null,
    onBlur = () => 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);
  };

  const {
    iconStyle = {},
    descriptionStyle = {},
    containerStyle = {},
    inputStyle = {},
    validationStyle = {},
    labelStyle = {},
  } = styles;

  let formFieldType = "text";
  if (type === FormFieldTypes.PASSWORD) formFieldType = "password";

  return (
    <div data-testid="FormBuilder-FormFields-TextField" style={containerStyle}>
      {mode === EditorMode.LIVE && (
        <div data-testid="FormBuilder-FormFields-TextField-LIVE">
          {label && <div style={labelStyle}>{label}</div>}
          {description && <div style={descriptionStyle}>{description}</div>}
          {icon && (
            <Icon type={icon} style={{ ...iconStyle, position: "absolute" }} />
          )}
          <Inpt
            type={formFieldType}
            name={name}
            placeholder={placeholder}
            style={{
              // width: "100%",
              ...inputStyle,
              ...(icon ? { paddingLeft: 40 } : {}),
            }}
            value={defaultValue}
            disabled={disabled}
            onChange={handleChange}
            onBlur={onBlur}
          />
        </div>
      )}
      {mode === EditorMode.EDITOR && (
        <div data-testid="FormBuilder-FormFields-TextField-EDITOR">
          <AttributeContainer
            onChange={handleChange}
            onBlur={onBlur}
            attributes={props}
            data={[
              {
                id: "label",
                attribute: AttributeNames.LABEL,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "placeholder",
                attribute: AttributeNames.PLACEHOLDER,
                settings: {
                  ...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: {},
              },
              {
                id: "initialvalue",
                attribute: AttributeNames.INITIALVALUE,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
              {
                id: "iconSelector",
                attribute: AttributeNames.ICON,
                settings: {
                  hide: true,
                  ...attributeContainerDataSettings,
                },
              },
            ]}
          />
        </div>
      )}
    </div>
  );
};

export default TextField;