import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { monokaiSublime } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import color from '@edma/design-tokens/tokens/js/color';
import Card from '../components/Card';
import ScrollToTopController from '../components/ScrollToTopController';

const useStyles = makeStyles(theme => ({
  root: {
    margin: theme.spacing(2, 0, 0),
    overflow: 'scroll',
  },
  toolbar: theme.mixins.toolbar,
  content: {
    margin: 40,
    flexGrow: 1,
    padding: theme.spacing(3),
    textAlign: 'left',
  },
  flexCards: {
    display: 'inline-flex',
    justifyContent: 'space-between',
    flexWrap: 'no-wrap',
    width: '100%',
  },
  codeBlock: {
    padding: '40px !important',
    margin: 10,
    borderRadius: 5,
  },
  table: {
    '& thead th': {
      background: theme.palette.type === 'light' ? color.g200 : color.g600,
      color: theme.palette.type === 'light' ? color.black : color.white,
    },
  }
}));

export default function Cards() {
  const custom = useStyles();
  const codeString = `import React from 'react';
import Card from '../components/Card';

export default function Cards() {
  return (
    <Card
      title="Example Card Title"
      image="./assets/img/card.principles.png"
      sub="Example sub title"
      cta="Click here"
      url="/"
    />
  );
}`;

  const rows = [
    createData('title', 'string', 'The title of the card.'),
    createData('image', 'url', 'The location of the card\'s image.'),
    createData('sub', 'string', 'The sub title of the card.'),
    createData('cta', 'string', 'The call-to-action text.'),
    createData('url', 'url', 'The url that the card will link to.'),
    createData('target', 'string', 'Acts just like the target param for anchor tags. Ex: _blank (optional)'),
    createData('ext', 'bool', 'If true, the card will link using an anchor. If false, the card will link using <Link> (optional)'),
  ];

  function createData (name, type, desc) {
    return { name, type, desc };
  }

  return (
    <main className={custom.content}>
      <ScrollToTopController />
      <div className={custom.toolbar} />
      <div className="content">
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Typography variant="h2" gutterBottom>
              Cards
            </Typography>
            <Typography variant="h5">
              Useful for laying things out next to each other.
            </Typography>
            <Grid container justify="space-between" spacing={2}>
              <Grid item xs={12} sm={12} md={6} lg={4} className={custom.flexCards}>
                <Card
                  title="Example Card Title"
                  image="./assets/img/card.principles.png"
                  sub="Example sub title"
                  cta="Click here"
                  url="/"
                  className={custom.card}
                />
              </Grid>
              <Grid item xs={12} sm={12} md={6} lg={4} className={custom.flexCards}>
                <Card
                  title="Example Card Title"
                  image="./assets/img/card.principles.png"
                  sub="Example sub title"
                  cta="Click here"
                  url="/"
                  className={custom.card}
                />
              </Grid>
              <Grid item xs={12} sm={12} md={6} lg={4} className={custom.flexCards}>
                <Card
                  title="Example Card Title"
                  image="./assets/img/card.principles.png"
                  sub="Example sub title"
                  cta="Click here"
                  url="/"
                  className={custom.card}
                />
              </Grid>
            </Grid>
            <div className={custom.toolbar} />
            <Typography variant="h5">
              Example:
            </Typography>
            <SyntaxHighlighter style={monokaiSublime} language="jsx" className={custom.codeBlock} >
              {codeString}
            </SyntaxHighlighter>
            <div className={custom.toolbar} />
            <Typography variant="h5">
              Available Props:
            </Typography>
            <Paper className={custom.root}>
              <Table className={custom.table}>
                <TableHead>
                  <TableRow>
                    <TableCell>Prop</TableCell>
                    <TableCell align="left">Type</TableCell>
                    <TableCell align="left">Description</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {rows.map(row => (
                    <TableRow key={row.name}>
                      <TableCell component="th" scope="row">
                        <code>{row.name}</code>
                      </TableCell>
                      <TableCell align="left">{row.type}</TableCell>
                      <TableCell align="left">{row.desc}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Paper>
          </Grid>
        </Grid>
      </div>
    </main>
  );
};
