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 ReadOnlyFormItem = ({ bodyshop, value, type = "text" }) => {
  if (!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":
      return <div>{Dinero({ amount: Math.round(value * 100) }).toFormat()}</div>;
    default:
      return <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{value}</div>;
  }
};

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