import Dinero from "dinero.js";
import React, { forwardRef } from "react";

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

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

const ReadOnlyFormItem = ({ bodyshop, value, type = "text", onChange }, ref) => {
  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>{value}</div>;
    case "currency":
      return <div>{Dinero({ amount: Math.round(value * 100) }).toFormat()}</div>;
    default:
      return <div>{value}</div>;
  }
};

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