import * as React from "react";
import { useState } from "react";
import { Icon } from "@sc/plugins/webcomponents/v2";
import { IconTypes } from "@sc/plugins/webcomponents/v2/Icon";

import { CaptionProps } from "./types";
import style from "./style";
import Typography from "@sc/modules/page/Builder/Properties/Sections/Typography";

/**
 * Creates a caption group for gathering input data
 */
const Caption: React.FC<CaptionProps> = (props) => {
  const {
    value,
    placeholder,
    text,
    onChange,
    showTypography = false,
    setCanDrag = (value) => false,
  } = props;

  const [caption, setCaption] = useState<string>(value);
  return (
    <div>
      <fieldset
        data-testid="Properties-Caption"
        style={style.fieldset}
        title={text}
      >
        <legend>{text || "Caption"}</legend>
        <div style={{ display: "flex" }}>
          <input
            placeholder={placeholder}
            value={caption}
            // ref={(el) => (this.input = el)}
            onMouseDown={() => setCanDrag(false)}
            onMouseUp={() => setCanDrag(true)}
            onChange={(e) => {
              setCaption(e.target.value);
            }}
            onBlur={(e) => {
              setCanDrag(true);
              onChange(e.target.value);
            }}
            style={{
              padding: 10,
              // float: "left",
              width: "100%",
              // borderRadius: 5,
              // border: "1px solid #CCC",
              border: "none",
              // margin: "5px 0",
              fontSize: 14,
            }}
          />
          <div
            onClick={() => {
              setCaption("");
              onChange("");
            }}
            style={{
              zoom: 0.65,
              cursor: "pointer",
              padding: 16,
              color: "#CCC",
            }}
          >
            <Icon type={IconTypes.Cancel} />
          </div>
        </div>
      </fieldset>
      {showTypography && (
        <Typography showColors={false} hideLabel {...props} type="Caption" />
      )}
    </div>
  );
};

export default Caption;