import React from 'react'
import { useSelector } from 'react-redux'

import { selectDiagnostics } from '../../store/selectors/selectDiagnostics'

import {
  SettingName,
  IntegrationValue,
  IntegrationRow,
  SettingValue,
  SettingsHeader,
  SettingsContainer,
  SettingsRow,
  IntegrationName,
  DiagnosticsContainer
} from './style'


export const DiagnosticsView = () => {
  const diagnostics = useSelector(selectDiagnostics)

  if (!diagnostics) {
    return <p>Please wait while diagnostics are being collected...</p>
  }

  return (
    <DiagnosticsContainer>
      <SettingsHeader>Settings</SettingsHeader>
      <SettingsContainer>
        <SettingsRow>
          <SettingName>Library version</SettingName>
          <SettingValue placeholder='---'>{diagnostics.analyticsVersion}</SettingValue>
        </SettingsRow>
        <SettingsRow>
          <SettingName>Write Key</SettingName>
          <SettingValue placeholder='---'>{diagnostics.writeKey}</SettingValue>
        </SettingsRow>
      </SettingsContainer>
      {diagnostics.integrations.length > 0 && (
        <>
          <SettingsHeader>Active integrations</SettingsHeader>
          <SettingsContainer aria-label='active integrations'>
            {diagnostics.integrations.map((plugin) => {
              return (
                <IntegrationRow key={plugin.name}>
                  <IntegrationName placeholder='---'>{plugin.name}</IntegrationName>
                  <IntegrationValue placeholder='---'>{plugin.version}</IntegrationValue>
                </IntegrationRow>
              )
            })}
          </SettingsContainer>
        </>
      )}
      {diagnostics.failedIntegrations.length > 0 && (
        <>
          <SettingsHeader>Failed integrations</SettingsHeader>
          <SettingsContainer aria-label='failed integrations'>
            {diagnostics.failedIntegrations.map((integration, i) => {
              return (
                <IntegrationRow key={i}>
                  <IntegrationName placeholder='---'>{integration}</IntegrationName>
                </IntegrationRow>
              )
            })}
          </SettingsContainer>
        </>
      )}
    </DiagnosticsContainer>
  )
}