import * as React from "react";
import { get } from "lodash";
import styled from "styled-components";

import { EditorMode } from "@sc/modules/v2/Editor/types";

import { LiveFormFieldProps, SProps } from "./types";
import { FormFieldTypes } from "../types";

// import Icon from "@sc/plugins/webcomponents/v2/Icon";

import {
  Checkboxes,
  ContentField,
  DateField,
  DropdownField,
  FileUpload,
  LinearScaleField,
  MultipleChoice,
  TextAreaField,
  TextField,
} from "../FormFields";
import { Grid } from "@material-ui/core";

const Wrapper: React.FC<{
  style?: React.CSSProperties;
  children: React.ReactNode;
  columns?: number;
}> = ({ style = {}, children, columns = 12 }) => {
  return (
    <Grid
      item
      xs={columns}
      data-testid="FormBuilder-LiveFormField"
      style={{ display: "inline-block", width: "100%", ...style }}
    >
      {children}
    </Grid>
  );
};

/**
 * A component that loads the live version of the individual form field
 *
 * This is what shows in the real web page (or editor canvas with overlay turned on)
 */
const LiveFormField: React.FC<LiveFormFieldProps> = (props) => {
  const {
    type,
    name,
    placeholder,
    items,
    label,
    description,
    defaultValue,
    styles = {
      labelStyle: {},
      inputStyle: {},
      containerStyle: {},
      descriptionStyle: {},
      validationStyle: {},
      iconStyle: {},
    },
    disabled,
    icon,
    columns,
    onChange = () => null,
    onBlur,
    onKeyUp,
    onClick,
    children,
  } = props;

  /**
   * Deal with any changes that come from the various form fields that I loads
   * @params
   */
  const handleChange = (): void => {
    onChange();
  };

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

  if (
    type === FormFieldTypes.TEXT ||
    type === FormFieldTypes.PASSWORD ||
    type === FormFieldTypes.NUMBER ||
    type === FormFieldTypes.CURRENCY
  ) {
    return (
      <Wrapper columns={columns}>
        <TextField
          {...props}
          mode={EditorMode.LIVE}
          onChange={handleChange}
          onBlur={handleChange}
        />
      </Wrapper>
    );
  }

  if (type === FormFieldTypes.DATE) {
    return (
      <Wrapper columns={columns}>
        <DateField
          {...props}
          mode={EditorMode.LIVE}
          onChange={handleChange}
          onBlur={handleChange}
        />
      </Wrapper>
    );
  }

  if (type === FormFieldTypes.SELECT || type === FormFieldTypes.DROPDOWN) {
    return (
      <Wrapper columns={columns}>
        <DropdownField
          {...props}
          data={items}
          mode={EditorMode.LIVE}
          onChange={handleChange}
        />
      </Wrapper>
    );
  }

  if (type === FormFieldTypes.TEXTAREA) {
    return (
      <Wrapper columns={columns}>
        <TextAreaField
          {...props}
          mode={EditorMode.LIVE}
          onChange={handleChange}
          onBlur={handleChange}
        />
      </Wrapper>
    );
  }

  if (type === FormFieldTypes.CHECKBOXES) {
    return (
      <Wrapper columns={columns}>
        <Checkboxes
          {...props}
          mode={EditorMode.LIVE}
          onChange={handleChange}
          data={items}
        />
      </Wrapper>
    );
  }

  if (type === FormFieldTypes.MULTIPLECHOICE) {
    return (
      <Wrapper columns={columns}>
        <MultipleChoice
          {...props}
          mode={EditorMode.LIVE}
          onChange={handleChange}
          data={items}
        />
      </Wrapper>
    );
  }

  if (type === FormFieldTypes.CONTENT || type === FormFieldTypes.TYPOGRAPHY) {
    return (
      <Wrapper columns={columns}>
        <ContentField {...props} />
      </Wrapper>
    );
  }

  if (type === FormFieldTypes.FILEUPLOAD) {
    return (
      <Wrapper columns={columns}>
        <FileUpload {...props} mode={EditorMode.LIVE} onChange={handleChange} />
      </Wrapper>
    );
  }

  if (type === FormFieldTypes.LINEARSCALE) {
    return (
      <Wrapper columns={columns}>
        <LinearScaleField
          {...props}
          mode={EditorMode.LIVE}
          onChange={handleChange}
        />
      </Wrapper>
    );
  }

  return <Wrapper columns={columns}>{children}</Wrapper>;
};

export default LiveFormField;