/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import styles from './LayoutViewer.css';

import type {Layout} from './types';

type Props = {
  id: number,
  layout: Layout,
};

export default function LayoutViewer({id, layout}: Props): React.Node {
  const {height, margin, padding, y, width, x} = layout;

  return (
    <div className={styles.LayoutViewer}>
      <div className={styles.Header}>layout</div>
      <div className={styles.DashedBox}>
        <div className={styles.LabelRow}>
          <label className={styles.Label}>margin</label>

          <label>{margin.top || '-'}</label>
        </div>

        <div className={styles.BoxRow}>
          <label>{margin.left || '-'}</label>

          <div className={styles.SolidBox}>
            <div className={styles.LabelRow}>
              <label className={styles.Label}>padding</label>

              <label>{padding.top || '-'}</label>
            </div>

            <div className={styles.BoxRow}>
              <label>{padding.left || '-'}</label>

              <div className={styles.DashedBox}>
                <div className={styles.LabelRow}>
                  {format(width)} x {format(height)} ({format(x)}, {format(y)})
                </div>
              </div>

              <label>{padding.right || '-'}</label>
            </div>

            <label>{padding.bottom || '-'}</label>
          </div>
          <label>{margin.right || '-'}</label>
        </div>
        <label>{margin.bottom || '-'}</label>
      </div>
    </div>
  );
}

function format(number: number): string | number {
  if (Math.round(number) === number) {
    return number;
  } else {
    return number.toFixed(1);
  }
}