import { Trans } from '@lingui/macro';
import React from 'react';
import styled from 'styled-components';

import { Datetime } from '@Format';

const StyledTable = styled.table`
  td {
    padding-right: 1em;
  }
  margin-bottom: 1rem;
`;

const StyledStatus = styled.span<{ isActive: boolean }>`
  color: ${(props) => (props.isActive ? 'green' : 'red')}; /* Grün bei aktiv, rot bei inaktiv */
  font-weight: bold;
`;

type StatusProps = {
  isActive: boolean;
  nextTime: string | null;
};

const Status: React.FC<StatusProps> = ({ isActive, nextTime }) => {
  const isPassive = nextTime === null && isActive;

  const active = <Trans>Active</Trans>;
  const deactive = <Trans>Deactive</Trans>;
  const passive = <Trans>Passive</Trans>;

  let nexttime = <span>--</span>;
  if (isPassive) {
    nexttime = passive;
  } else if (isActive) {
    nexttime = <Datetime datetime={nextTime} />;
  }

  return (
    <StyledTable>
      <tbody>
        <tr>
          <td>
            <Trans>Status</Trans>
          </td>
          <td>
            <StyledStatus isActive={isActive}>
              {isActive ? active : deactive}
            </StyledStatus>
          </td>
        </tr>
        <tr>
          <td>
            <Trans>Next time</Trans>
          </td>
          <td>{nexttime}</td>
        </tr>
      </tbody>
    </StyledTable>
  );
};

export default Status;