import Dinero from "dinero.js";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});
const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

const toFiniteNumber = (value) => {
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : null;
};

const ReadOnlyFormItem = ({ bodyshop, value, type = "text" }) => {
  if (value === null || value === undefined || value === "") return null;
  switch (type) {
    case "employee": {
      const emp = bodyshop.employees.find((e) => e.id === value);
      return `${emp?.first_name} ${emp?.last_name}`;
    }

    case "text":
      return <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{value}</div>;
    case "currency": {
      const numericValue = toFiniteNumber(value);

      if (numericValue === null) {
        return null;
      }

      return <div>{Dinero({ amount: Math.round(numericValue * 100) }).toFormat()}</div>;
    }
    default:
      return <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{value}</div>;
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(ReadOnlyFormItem);
