import React from 'react'
import { TabList, Tab, TabPanel, TabPanels, Tabs, Heading, Box } from '@chakra-ui/react'
import { Data } from '../../models/game'
import { Interweave } from 'interweave'
import { ImmutableObject } from '@hookstate/core'

interface Props {
  game: ImmutableObject<Data>
}

export default function SystemRequirements({ game }: Props) {
  const { windows, mac, linux } = game.systemRequirements
  let winRec, macMin, macRec, linMin, linRec
  windows.recommended.length > 1 ? winRec = false : winRec = true
  mac.minimum.length > 1 ? macMin = false : macMin = true
  mac.recommended.length > 1 ? macRec = false : macRec = true
  linux.minimum.length > 1 ? linMin = false : linMin = true
  linux.recommended.length > 1 ? linRec = false : linRec = true

  return (
    <Box>
      <Heading as='h3' size='lg'>System Requirements</Heading>
      <Tabs isLazy mt='3'>
        <TabList>
          <Tab>Windows</Tab>
          <Tab isDisabled={macMin}>Mac</Tab>
          <Tab isDisabled={linMin}>Linux</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <Tabs isLazy>
              <TabList>
                <Tab>Minimum</Tab>
                <Tab isDisabled={winRec}>Recommended</Tab>
              </TabList>
              <TabPanels>
                <TabPanel>{<Interweave content={windows.minimum} />}</TabPanel>
                <TabPanel>{<Interweave content={windows.recommended} />}</TabPanel>
              </TabPanels>
            </Tabs>
          </TabPanel>
          <TabPanel>
            <Tabs isLazy>
              <TabList>
                <Tab isDisabled={macMin}>Minimum</Tab>
                <Tab isDisabled={macRec}>Recommended</Tab>
              </TabList>
              <TabPanels>
                <TabPanel>{<Interweave content={mac.minimum} />}</TabPanel>
                <TabPanel>{<Interweave content={mac.recommended} />}</TabPanel>
              </TabPanels>
            </Tabs>
          </TabPanel>
          <TabPanel>
            <Tabs isLazy>
              <TabList>
                <Tab isDisabled={linMin}>Minimum</Tab>
                <Tab isDisabled={linRec}>Recommended</Tab>
              </TabList>
              <TabPanels>
                <TabPanel>{<Interweave content={linux.minimum} />}</TabPanel>
                <TabPanel>{<Interweave content={linux.recommended} />}</TabPanel>
              </TabPanels>
            </Tabs>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  )
}
