import React, { useState, useEffect } from "react";
import { EditableText as BlueprintEditableText } from "@blueprintjs/core";
import styled from "styled-components";
type EditableTextProps = {
  type: "text" | "password" | "email" | "phone" | "date";
  defaultValue: string;
  onTextChanged: (value: string) => void;
  isEditing: boolean;
  placeholder: string;
};

const EditableTextWrapper = styled.div<{ isEditing: boolean }>`
  && {
    & .bp3-editable-text {
      border: ${props => (props.isEditing ? "1px solid #ccc" : "none")};
      cursor: pointer;
      padding: 5px 10px;
      &:before,
      &:after {
        display: none;
      }
    }
  }
`;

export const EditableText = (props: EditableTextProps) => {
  const [isEditing, setIsEditing] = useState(props.isEditing);
  useEffect(() => {
    setIsEditing(props.isEditing);
  }, [props.isEditing]);

  const edit = () => setIsEditing(true);
  const onChange = (value: string) => {
    props.onTextChanged(value);
    setIsEditing(false);
  };
  return (
    <EditableTextWrapper onDoubleClick={edit} isEditing={isEditing}>
      <BlueprintEditableText
        {...props}
        disabled={!isEditing}
        isEditing={!!isEditing}
        onConfirm={onChange}
        selectAllOnFocus
      />
    </EditableTextWrapper>
  );
};

export default EditableText;