import { CounterResultType, MeasurementResultType } from './hooks';
import { Datetime, Number } from '@Format';
import { Trans } from '@lingui/macro';
import React from 'react';
import styled from 'styled-components';

type HistoryProps = {
  data: (CounterResultType | MeasurementResultType)[];
  isCounter: boolean;
};

const History: React.FC<HistoryProps> = ({ isCounter, data }) => {
  let view = null;
  if (data.length === 0) {
    return view;
  }

  if (isCounter) {
    view = <CounterHistory data={data as CounterResultType[]} />;
  } else {
    view = <MeasurementHistory data={data} />;
  }

  return view;
};

const StyledTable = styled.table`
  width: 100%;
  table-layout: fixed; /* Verhindert ungleichmäßige Spaltenbreiten */
  margin-bottom: 1em;
  border-collapse: separate;
  border-spacing: 1.5em 0;

  th, td {
    padding: 0.2em 2em;
    text-align: left;
    white-space: nowrap; /* Verhindert Zeilenumbruch */
  }

  th:first-child, td:first-child {
    width: 40%; /* Erste Spalte größer machen */
  }
`;



const CounterHistory: React.FC<{ data: CounterResultType[] }> = ({ data }) => {
  const Value = ({
    counter,
    newCounter
  }: {
    counter: number;
    newCounter: number | null;
  }) => {
    const value = <Number value={counter} digits={2} />;
    const isNoNewCounter =
      newCounter === null || window.Number(newCounter) === 0;
    const newValue = isNoNewCounter ? null : (
      <Number value={newCounter} digits={2} />
    );

    let view = value;
    if (newValue !== null) {
      view = (
        <span>
          {newValue} / {value}
        </span>
      );
    }

    return view;
  };

  return (
    <StyledTable>
      <thead>
        <tr>
          <th>
            <Trans>Date</Trans>
          </th>
          <th>
            <Trans>Value</Trans>
          </th>
          <th>+/-</th>
        </tr>
      </thead>
      <tbody>
        {data.map(c => (
          <tr key={c.id}>
            <td>
              <Datetime datetime={c.created_at} />
            </td>
            <td>
              <Value counter={c.value} newCounter={c.reset_value} />
            </td>
            <td>
              <Number value={c.diff_value} digits={2} />
            </td>
          </tr>
        ))}
      </tbody>
    </StyledTable>
  );
};

const MeasurementHistory: React.FC<{ data: MeasurementResultType[] }> = ({
  data
}) => {
  return (
    <StyledTable>
      <thead>
        <tr>
          <th>
            <Trans>Date</Trans>
          </th>
          <th>
            <Trans>Value</Trans>
          </th>
        </tr>
      </thead>
      <tbody>
        {data.map(c => (
          <tr key={c.id}>
            <td>
              <Datetime datetime={c.created_at} />
            </td>
            <td>
              <Number value={c.value} digits={2} />
            </td>
          </tr>
        ))}
      </tbody>
    </StyledTable>
  );
};

export default History;