import * as React from "react";
import styled from "styled-components";
import { get } from "lodash";
import { EditorMode } from "@sc/modules/v2/Editor/types";

import { Icon } from "../";
interface WrapperFields {
  style?: React.CSSProperties;
  children: React.ReactNode;
}

const Wrapper: React.FC<WrapperFields> = ({ style, children }) => {
  return (
    <div data-testid="WC-FORMFIELD-LIVE" style={style}>
      {children}
    </div>
  );
};

interface SProps {
  mode?: EditorMode;
  inputStyle: any;
}

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

export const FormField: React.FC<FormFieldProps> = ({
  children,
  type,
  name,
  label,
  style,
  inputStyle,
  labelStyle,
  placeholder,
  defaultValue,
  icon,
  iconStyle,
  options,
}) => {
  if (type === "Text" || type === "Password")
    return (
      <Wrapper style={style}>
        {label && <div style={labelStyle}>{label}</div>}
        <div>
          {icon && (
            <Icon type={icon} style={{ ...iconStyle, position: "absolute" }} />
          )}
          <Inpt
            inputStyle={inputStyle}
            type={type.toLowerCase()}
            name={name}
            placeholder={placeholder}
            style={inputStyle}
            value={defaultValue}
          />
        </div>
      </Wrapper>
    );

  if (type === "Select") {
    return (
      <Wrapper style={style}>
        {label && <div style={labelStyle}>{label}</div>}
        <div style={{ ...inputStyle, boxSizing: "border-box" }}>
          <Select
            inputStyle={inputStyle}
            style={{
              ...inputStyle,
              border: "none",
              background: "transparent",
            }}
            name={name}
            placeholder={placeholder}
          >
            {options.map((itm) => (
              <option value={itm.name}>{itm.value}</option>
            ))}
          </Select>
        </div>
      </Wrapper>
    );
  }
  if (type === "Textarea") {
    return (
      <Wrapper style={style}>
        {label && <div style={labelStyle}>{label}</div>}
        <Textarea
          inputStyle={inputStyle}
          style={inputStyle}
          name={name}
          placeholder={placeholder}
        >
          {defaultValue}
        </Textarea>
      </Wrapper>
    );
  }

  if (type === "Checkbox") {
    return (
      <Wrapper style={style}>
        <label style={{ ...labelStyle, display: "flex" }}>
          <div>
            <input style={{ marginRight: 15 }} type="checkbox" name={name} />
          </div>
          <div style={{}}>{label}</div>
        </label>
      </Wrapper>
    );
  }

  if (type === "Radio") {
    return (
      <Wrapper style={style}>
        <label style={{ ...labelStyle, display: "flex" }}>
          <div>
            <input style={{ marginRight: 15 }} type="radio" name={name} />
          </div>
          <div style={{}}>{label}</div>
        </label>
      </Wrapper>
    );
  }
  return <Wrapper>{children}</Wrapper>;
};

export default FormField;