import { h } from 'preact';

const TextElement = ({ element: { style, text } }) => (
  <span className="text-element" style={style}>
    {text}
  </span>
);

const PureTextRow = ({ row }) => (
  <div className="bloc text-bloc">{row.text.map(element => <TextElement element={element} />)}</div>
);

const PureImageRow = ({ row }) => {
  const style =
    'heightFactor' in row
      ? { height: `calc(${row.heightFactor} * var(--rowHeight))` }
      : { height: 'calc(2 * var(--rowHeight))' };
  return (
    <div className="bloc image-bloc" style={style}>
      <img src={encodeURI(row.image)} alt="" />
    </div>
  );
};

const TextAndImageRow = ({ row }) => (
  <div className="bloc image-text-bloc">
    <img className="row-icon" src={encodeURI(row.image)} alt="" />
    <div className="text-section">{row.text.map(element => <TextElement element={element} />)}</div>
  </div>
);

const Row = ({ row }) => {
  if (!row) {
    return null;
  }
  let SubRow;
  switch (row.type) {
    case 0:
      SubRow = PureTextRow;
      break;
    case 1:
      SubRow = TextAndImageRow;
      break;
    case 2:
      SubRow = PureImageRow;
      break;
    default:
      SubRow = null;
      break;
  }
  return (
    <div style={{ padding: '10px' }}>
      <SubRow row={row} />
    </div>
  );
};

export default Row;