import * as React from "react";
import { ErrorMessage } from "formik";
import { createUseStyles } from "react-jss";
import { useCommonStyles } from "../StorjWidget/StorjWidget.style";

const useStyles = createUseStyles({
  inputContainer: {
    display: "flex",
    position: "relative",
  },
});
type Props = {
  label: string;
  inputName: string;
  placeholder: string;
  value: string;
  onClickFileSelect: any;
  onChange: any;
};
const PathSelectInput = (props: Props) => {
  const { label, inputName, placeholder, value, onClickFileSelect, onChange } =
    props;

  const classes = useStyles();
  const commonClasses = useCommonStyles();
  return (
    <>
      <label htmlFor={inputName}>{label}</label>
      <div className={classes.inputContainer}>
        <i
          style={{
            position: "absolute",
            right: 6,
            top: 18,
            cursor: "pointer",
            color: "var(--theia-input-foreground)",
            fontSize: 16,
          }}
          className="fa fa-ellipsis-h"
          onClick={() => {
            onClickFileSelect();
          }}
        />

        <input
          type="text"
          readOnly
          name={inputName}
          style={{ width: "100%" }}
          value={value}
          onClick={() => {
            if (!value) {
              onClickFileSelect();
            }
          }}
          onChange={onChange}
          placeholder={placeholder}
          className={`theia-input ${commonClasses.input}`}
        />
      </div>

      <ErrorMessage
        className={commonClasses.errorMessage}
        name={inputName}
        component="div"
      />
    </>
  );
};

export default PathSelectInput;