import React, { Component } from 'react';
import {
  Typography,
  Box,
  List,
  ListItem,
  ListItemText,
  Link,
  ListItemAvatar
} from '@material-ui/core';
import { SectionContent } from '../components';

import CommentIcon from '@material-ui/icons/CommentTwoTone';
import MenuBookIcon from '@material-ui/icons/MenuBookTwoTone';
import GitHubIcon from '@material-ui/icons/GitHub';
import StarIcon from '@material-ui/icons/Star';
import ImportExportIcon from '@material-ui/icons/ImportExport';
import BugReportIcon from '@material-ui/icons/BugReportTwoTone';

export const WebAPISystemSettings =
  window.location.origin + '/api/system/settings';
export const WebAPISystemInfo = window.location.origin + '/api/system/info';

class EMSESPHelp extends Component {
  render() {
    return (
      <SectionContent title="EMS-ESP Help" titleGutter>
        <List>
          <ListItem>
            <ListItemAvatar>
              <MenuBookIcon />
            </ListItemAvatar>
            <ListItemText>
              For the latest news and updates go to the{' '}
              <Link href="https://emsesp.github.io/docs" color="primary">
                {'official documentation'}&nbsp;website
              </Link>
            </ListItemText>
          </ListItem>

          <ListItem>
            <ListItemAvatar>
              <CommentIcon />
            </ListItemAvatar>
            <ListItemText>
              For live community chat join our{' '}
              <Link href="https://discord.gg/3J3GgnzpyT" color="primary">
                {'Discord'}&nbsp;server
              </Link>
            </ListItemText>
          </ListItem>

          <ListItem>
            <ListItemAvatar>
              <GitHubIcon />
            </ListItemAvatar>
            <ListItemText>
              To report an issue or feature request go to{' '}
              <Link
                href="https://github.com/emsesp/EMS-ESP32/issues/new/choose"
                color="primary"
              >
                {'click here'}
              </Link>
            </ListItemText>
          </ListItem>

          <ListItem>
            <ListItemAvatar>
              <ImportExportIcon />
            </ListItemAvatar>
            <ListItemText>
              To export your system settings{' '}
              <Link target="_blank" href={WebAPISystemSettings} color="primary">
                {'click here'}
              </Link>
            </ListItemText>
          </ListItem>

          <ListItem>
            <ListItemAvatar>
              <BugReportIcon />
            </ListItemAvatar>
            <ListItemText>
              To export the current status of EMS-ESP{' '}
              <Link target="_blank" href={WebAPISystemInfo} color="primary">
                {'click here'}
              </Link>
            </ListItemText>
          </ListItem>
        </List>

        <Box bgcolor="info.main" border={1} p={3} mt={1} mb={0}>
          <Typography variant="h6">
            EMS-ESP is free and open-source.
            <br></br>Please consider supporting this project by giving it a{' '}
            <StarIcon style={{ color: '#fdff3a' }} /> on our{' '}
            <Link href="https://github.com/emsesp/EMS-ESP32" color="primary">
              {'GitHub page'}
            </Link>
            .
          </Typography>
        </Box>
        <br></br>
      </SectionContent>
    );
  }
}

export default EMSESPHelp;
