import React, { Fragment, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import {
  ClipboardCopy,
  Flex,
  FlexItem,
  Grid,
  GridItem,
  Label,
} from '@patternfly/react-core';
import {
  Skeleton,
  SkeletonSize,
} from '@redhat-cloud-services/frontend-components/Skeleton';
import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat';
import { CullingInformation } from '@redhat-cloud-services/frontend-components/CullingInfo';
import { getFact } from './helpers';
import InsightsDisconnected from '../../Utilities/InsightsDisconnected';
import { verifyCulledReporter } from '../../Utilities/sharedFunctions';
import { REPORTER_PUPTOO } from '../../Utilities/constants';
import OsModeLabel from './OsModeLabel';

/**
 * Basic information about system.
 * UUID and last seen.
 *  @param   {object}            props                 entity and if entity is loaded.
 *  @param   {object}            props.entity          entity object
 *  @param   {boolean}           props.loaded          if entity is loaded
 *  @param   {React.elementType} props.LastSeenWrapper last seen wrapper element
 *  @returns {React.ReactNode}                         the facts info component
 */
const FactsInfo = ({
  entity,
  loaded,
  LastSeenWrapper = Fragment,
  ...props
}) => {
  const [id, setId] = useState(null);

  useEffect(() => {
    setId(getFact(`id`, entity));
  }, [entity]);

  return (
    <Grid className="ins-entity-facts" {...props}>
      <GridItem md={6}>
        <Flex>
          <FlexItem>UUID:</FlexItem>
          <FlexItem grow={{ default: 'grow' }}>
            {loaded ? (
              id ? (
                <ClipboardCopy variant="inline-compact">{id}</ClipboardCopy>
              ) : (
                ' '
              )
            ) : (
              <Skeleton size={SkeletonSize.md} fontSize="sm" />
            )}
          </FlexItem>
        </Flex>
        <Flex>
          <FlexItem>Last seen:</FlexItem>
          <FlexItem grow={{ default: 'grow' }}>
            {loaded ? (
              <LastSeenWrapper>
                {CullingInformation ? (
                  <CullingInformation
                    culled={getFact('culled_timestamp', entity)}
                    staleWarning={getFact('stale_warning_timestamp', entity)}
                    stale={getFact('stale_timestamp', entity)}
                    currDate={new Date()}
                  >
                    <DateFormat
                      date={getFact('last_check_in', entity)}
                      type="exact"
                    />
                  </CullingInformation>
                ) : (
                  <DateFormat
                    date={getFact('last_check_in', entity)}
                    type="exact"
                  />
                )}
              </LastSeenWrapper>
            ) : (
              <Skeleton size={SkeletonSize.md} fontSize="sm" />
            )}
            {loaded &&
              verifyCulledReporter(
                getFact('per_reporter_staleness', entity),
                REPORTER_PUPTOO,
              ) && <InsightsDisconnected />}
          </FlexItem>
        </Flex>
        <Flex>
          <FlexItem>
            {loaded &&
              entity?.system_profile?.operating_system?.name ===
                'CentOS Linux' && (
                <div>
                  <Label color="teal">CentOS Linux</Label>
                </div>
              )}
          </FlexItem>
          <FlexItem>
            {loaded ? (
              <OsModeLabel
                osMode={
                  entity?.system_profile?.bootc_status?.booted?.image_digest ||
                  entity?.system_profile?.host_type === 'edge'
                    ? 'image'
                    : 'package'
                }
              />
            ) : null}
          </FlexItem>
        </Flex>
      </GridItem>
    </Grid>
  );
};

FactsInfo.propTypes = {
  loaded: PropTypes.bool,
  entity: PropTypes.object,
  LastSeenWrapper: PropTypes.elementType,
};

export default FactsInfo;