import {getType, getInst, getSymbol, Double, Int, symbolFunction, symbolProduct, symbolSum, symbolDict, symbolSet, symbolList, eqType, match} from "dope2";

import "./Value.css";

export function Value({dynamic}) {
  const type = getType(dynamic);
  const inst = getInst(dynamic);
  if (eqType(type)(Double)) {
    return <ValueDouble val={inst}/>;
  }
  if (eqType(type)(Int)) {
    return <ValueInt val={inst}/>;
  }
  const symbol = getSymbol(type);
  switch (symbol) {
    case symbolFunction:
      return <ValueFunction/>;
    //   return <BinaryType type={type} cssClass="functionType" infix="&rarr;" prefix="" suffix=""/>;
    // case symbolProduct:
    //   return <BinaryType type={type} cssClass="productType" infix="&#10799;" prefix="" suffix=""/>;
    case symbolSum:
      return <ValueSum val={inst} leftType={type.params[0](type)} rightType={type.params[1](type)}/>;
    // case symbolDict:
    //   return <BinaryType type={type} cssClass="dictType" infix="&rArr;" prefix="{" suffix="}"/>;
    // case symbolSet:
    //   return <UnaryType type={type} cssClass="setType" prefix="{" suffix="}" />;
    case symbolList:
      return <List val={inst} elemType={type.params[0](type)} />;
  
    default:
      return <>don't know how to show value</>;
  }
}

function ValueDouble({val}) {
  return <span className="value">{val.toString()}</span>;
}
function ValueInt({val}) {
  return <span className="value">{val.toString()}</span>;
}
function ValueFunction() {
  return <>&#119891;&#119899;&nbsp;</>;
}
// function Sum({val, elemType}) {
//   return 
// }
function List({val, elemType}) {
  return <span className="listType">[{val.map((v, i) => <Value dynamic={{i:v, t:elemType}}/>)}]</span>;
}
function ValueSum({val, leftType, rightType}) {
  return match(val)
    (l => <>L <Value dynamic={{i:l, t:leftType}}/></>)
    (r => <>R <Value dynamic={{i:r, t:rightType}}/></>);
}