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 Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
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 ScrollToTopController from '../components/ScrollToTopController';
import ProgressBar from '../components/ProgressBar';

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,
  },
  sample: {
    borderRadius: '5px',
  },
  table: {
    '& thead th': {
      background: theme.palette.type === 'light' ? color.g200 : color.g600,
      color: theme.palette.type === 'light' ? color.black : color.white,
    },
  }
}));

export default function Progress(props) {
  const custom = useStyles();
  const determinateCodeString = `import React from 'react';
import ProgressBar from '../components/ProgressBar';

export default function LinearDeterminate() {
  return (
    <ProgressBar
      type='linear'
      variant='determinate'
      color='primary'
      step='1'
      totalsteps='2'
      value={25}
      label='Add data to the lake.'
      successicon
    />
  );
}`;

const indeterminateCodeString = `import React from 'react';
import ProgressBar from '../components/ProgressBar';

export default function LinearIndeterminate() {
  return (
    <ProgressBar
      type='linear'
      variant='indeterminate'
      color='primary'
      label='Loading content...'
    />
  );
}`;

const circularLabelCodeString = `import React from 'react';
import ProgressBar from '../components/ProgressBar';

export default function CircularIndeterminate() {
  return (
    <ProgressBar
      type='circular'
      variant='indeterminate'
      color='primary'
      label='Loading content...'
    />
  );
}`;

const circularNoLabelCodeString = `import React from 'react';
import ProgressBar from '../components/ProgressBar';

export default function CircularIndeterminate() {
  return (
    <ProgressBar
      type='circular'
      variant='indeterminate'
      color='secondary'
    />
  );
}`;

  const rows = [
    createData('type', 'string', 'Accepts: linear, circular'),
    createData('variant', 'string', 'Accepts: determinate, indeterminate'),
    createData('color', 'string', 'Accepts: primary, secondary'),
    createData('value', 'num', 'Sets the current percent complete of the progress bar.'),
    createData('label', 'string', 'Sets the label for the current step'),
    createData('step', 'num', 'Sets the current step number. (Requires linear type)'),
    createData('totalsteps', 'num', 'Sets the total number of steps. (Requires linear type)'),
    createData('successicon', 'bool', 'If true, displays a checkmark icon at the end of the progress bar. (Requires linear type)'),
  ];

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

  return (
    <main className={custom.content}>
      <ScrollToTopController />
      <div className={custom.toolbar} />
      <div className="content">
        <Typography variant="h2" gutterBottom>
          Progress Bar
        </Typography>
        <Typography variant="h5">
          Useful for indicating to users that something is happening.
        </Typography>
        <Box my={10}>
          <Typography variant="h5">
            Linear determinate example with success icon.
          </Typography>
          <Box p={2} className={custom.sample}>
            <ProgressBar
              type="linear"
              step="1"
              totalsteps="2"
              label="Add data to the lake."
              variant="determinate"
              value={25}
              successicon
            />
          </Box>
          <SyntaxHighlighter style={monokaiSublime} language="jsx" className={custom.codeBlock} >
            {determinateCodeString}
          </SyntaxHighlighter>
        </Box>
        <hr />
        <Box my={10}>
          <Typography variant="h5">
            Linear indeterminate example.
          </Typography>
          <Box p={2} className={custom.sample}>
            <ProgressBar
              type="linear"
              label="Loading content..."
              variant="indeterminate"
            />
          </Box>
          <SyntaxHighlighter style={monokaiSublime} language="jsx" className={custom.codeBlock} >
            {indeterminateCodeString}
          </SyntaxHighlighter>
        </Box>
        <hr />
        <Box my={10}>
          <Typography variant="h5">
            Circular with label example.
          </Typography>
          <Box p={2} className={custom.sample}>
            <ProgressBar
              type="circular"
              label="Loading content..."
              variant="indeterminate"
            />
          </Box>
          <SyntaxHighlighter style={monokaiSublime} language="jsx" className={custom.codeBlock} >
            {circularLabelCodeString}
          </SyntaxHighlighter>
        </Box>
        <hr />
        <Box my={10}>
          <Typography variant="h5">
            Circular without label example.
          </Typography>
          <Box p={2} className={custom.sample}>
            <ProgressBar
              type="circular"
              variant="indeterminate"
              color="secondary"
            />
          </Box>
          <SyntaxHighlighter style={monokaiSublime} language="jsx" className={custom.codeBlock} >
            {circularNoLabelCodeString}
          </SyntaxHighlighter>
        </Box>
        <hr />
        <Box mt={10}>
          <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>
        </Box>
      </div>
    </main>
  );
};
