text: import React from "react";
  import {
    Grid,
    Select,
    OutlinedInput,
    MenuItem,
    withStyles,
  } from "@material-ui/core";
  import {
    ResponsiveContainer,
    ComposedChart,
    LineChart,
    Line,
    Area,
    YAxis,
    XAxis
  } from "recharts";
  
  import Ph from "../../Json/phThing";
  import Graph from "../../Json/graph";
  import Json from "../../Json/json";
  import mock from "./mock";
  import Widget from "../../components/Widget";
  import PageTitle from "../../components/PageTitle";
  import { Typography } from "../../components/Wrappers";
  import Dot from "../../components/Sidebar/components/Dot";
  
  import BigStat from "./components/BigStat/BigStat";
  
  const getRandomData = (length, min, max, multiplier = 10, maxDiff = 10) => {
    const array = new Array(length).fill();
    let lastValue;
  
    return array.map((item, index) => {
      let randomValue = Math.floor(Math.random() * multiplier + 1);
  
      while (
        randomValue <= min ||
        randomValue >= max ||
        (lastValue && randomValue - lastValue > maxDiff)
      ) {
        randomValue = Math.floor(Math.random() * multiplier + 1);
      }
  
      lastValue = randomValue;
  
      return { value: randomValue };
    });
  };
  
  const getMainChartData = () => {
    const resultArray = [];
    const tablet = getRandomData(100, 0, 14, 1, 1000);
    const desktop = getRandomData(100, 0, 14, 1, 1500);
    const mobile = getRandomData(100, 0, 14, 1, 1500);
  
    for (let i = 0; i < tablet.length; i++) {
      resultArray.push({
        tablet: tablet[i].value,
        desktop: desktop[i].value,
        mobile: mobile[i].value
      });
    }
  
    return resultArray;
  };
  
  const mainChartData = getMainChartData();
  
  
  
  const Dashboard = ({ classes, theme, ...props }) => {
    return (
      <React.Fragment>
        <PageTitle title="Dashboard" />
        <Grid container spacing={32}>
          <Grid item lg={3} md={4} sm={6} xs={12}>
            <Widget
              title="pH Atual"
              upperTitle
              bodyClass={classes.fullHeightBody}
              className={classes.card}
            >
              <div className={classes.visitsNumberContainer}>
                <Typography size="xxl" weight="medium">
                  < Json />
                </Typography>
                <LineChart
                  width={55}
                  height={30}
                  data={[
                    { value: 10 },
                    { value: 15 },
                    { value: 10 },
                    { value: 17 },
                    { value: 18 }
                  ]}
                  margin={{ left: theme.spacing.unit * 2 }}
                >
                  <Line
                    type="natural"
                    dataKey="value"
                    stroke={theme.palette.success.main}
                    strokeWidth={5}
                    dot={false}
                  />
                </LineChart>
              </div>
              <Grid
                container
                direction="row"
                justify="space-between"
                alignItems="center"
              >
                <Grid item>
                  <Typography color="textSecondary">Medições</Typography>
                  <Typography size="md">100</Typography>
                </Grid>
                <Grid item>
                  <Typography color="textSecondary">Variação</Typography>
                  <Typography size="md">0.5</Typography>
                </Grid>
                <Grid item>
                  <Typography color="textSecondary">Delay</Typography>
                  <Typography size="md">15 seg</Typography>
                </Grid>
              </Grid>
            </Widget>  
          </Grid>
          <Grid item lg={3} md={4} sm={6} xs={12}>
          < Ph />
          </Grid>
          <Grid item lg={3} md={4} sm={6} xs={12}>
          < Graph />
          </Grid>
          <Grid item xs={12}>
            <Widget
              header={
                <div className={classes.mainChartHeader}>
                  <Typography variant="headline" color="textSecondary">
                    Variação de pH (Em desenvolvimento)
                  </Typography>
                  <div className={classes.mainChartHeaderLabels}>
                    <div className={classes.mainChartHeaderLabel}>
                      <Dot color="warning" />
                      <Typography className={classes.mainChartLegentElement}>pH Medido</Typography>
                    </div>
                    <div className={classes.mainChartHeaderLabel}>
                      <Dot color="primary" />
                      <Typography className={classes.mainChartLegentElement}>pH Ideal</Typography>
                    </div>
                  </div>
                  <Select
                    value={props.mainChartState}
                    onChange={e => props.setMainChartState(e.target.value)}
                    input={
                      <OutlinedInput
                        labelWidth={0}
                        classes={{ notchedOutline: classes.mainChartSelectRoot, input: classes.mainChartSelect }}
                      />
                    }
                    autoWidth
                  >
                    <MenuItem value="daily">Diário</MenuItem>
                    <MenuItem value="weekly">Semanal</MenuItem>
                    <MenuItem value="monthly">Mensal</MenuItem>
                  </Select>
                </div>
              }
            >
              <ResponsiveContainer width="100%" height={350}>
                <ComposedChart
                  margin={{ top: 0, right: -15, left: -15, bottom: 0 }}
                  data={mainChartData}
                >
                  <YAxis
                    ticks={[0, 2, 4, 6, 8, 10, 12, 14]}
                    tick={{ fill: theme.palette.text.hint + '80', fontSize: 14 }}
                    stroke={theme.palette.text.hint  + '80'}
                    tickLine={false}
                  />
                  <XAxis
                    tickFormatter={i => i + 1}
                    tick={{ fill: theme.palette.text.hint  + '80', fontSize: 14 }}
                    stroke={theme.palette.text.hint  + '80'}
                    tickLine={false}
                  />
                  <Area
                    type="natural"
                    dataKey="desktop"
                    fill={theme.palette.background.light}
                    strokeWidth={0}
                    activeDot={false}
                  />
                  <Line
                    type="natural"
                    dataKey="mobile"
                    stroke={theme.palette.primary.main}
                    strokeWidth={2}
                    dot={false}
                    activeDot={false}
                  />
                  <Line
                    type="linear"
                    dataKey="tablet"
                    stroke={theme.palette.warning.main}
                    strokeWidth={2}
                    dot={{
                      stroke: theme.palette.warning.dark,
                      strokeWidth: 2,
                      fill: theme.palette.warning.main
                    }}
                  />
                </ComposedChart>
              </ResponsiveContainer>
            </Widget>
          </Grid>
          {mock.bigStat.map(stat => (
            <Grid item md={4} sm={6} xs={12} key={stat.product}>
              <BigStat {...stat} />
            </Grid>
          ))}
        </Grid>
      </React.Fragment>
    );
  };
  
  const styles = theme => ({
    card: {
      minHeight: "100%",
      display: "flex",
      flexDirection: "column"
    },
    visitsNumberContainer: {
      display: "flex",
      alignItems: "center",
      flexGrow: 1,
      paddingBottom: theme.spacing.unit
    },
    progressSection: {
      marginBottom: theme.spacing.unit
    },
    progressTitle: {
      marginBottom: theme.spacing.unit * 2
    },
    progress: {
      marginBottom: theme.spacing.unit,
      backgroundColor: theme.palette.primary.main
    },
    pieChartLegendWrapper: {
      height: "100%",
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "flex-end",
      marginRight: theme.spacing.unit
    },
    legendItemContainer: {
      display: "flex",
      alignItems: "center",
      marginBottom: theme.spacing.unit
    },
    fullHeightBody: {
      display: "flex",
      flexGrow: 1,
      flexDirection: "column",
      justifyContent: "space-between"
    },
    tableWidget: {
      overflowX: "auto"
    },
    progressBar: {
      backgroundColor: theme.palette.warning.main
    },
    performanceLegendWrapper: {
      display: "flex",
      flexGrow: 1,
      alignItems: "center",
      marginBottom: theme.spacing.unit
    },
    legendElement: {
      display: "flex",
      alignItems: "center",
      marginRight: theme.spacing.unit * 2,
    },
    legendElementText: {
      marginLeft: theme.spacing.unit
    },
    serverOverviewElement: {
      display: "flex",
      alignItems: "center",
      maxWidth: "100%"
    },
    serverOverviewElementText: {
      minWidth: 145,
      paddingRight: theme.spacing.unit * 2
    },
    serverOverviewElementChartWrapper: {
      width: "100%"
    },
    mainChartHeader: {
      width: "100%",
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      [theme.breakpoints.only("xs")]: {
        flexWrap: 'wrap',
      }
    },
    mainChartHeaderLabels: {
      display: "flex",
      alignItems: "center",
      [theme.breakpoints.only("xs")]: {
        order: 3,
        width: '100%',
        justifyContent: 'center',
        marginTop: theme.spacing.unit,
        marginBottom: theme.spacing.unit,
      }
    },
    mainChartHeaderLabel: {
      display: "flex",
      alignItems: "center",
      marginLeft: theme.spacing.unit * 3,
    },
    mainChartSelectRoot: {
      borderColor: theme.palette.text.hint + '80 !important',
    },
    mainChartSelect: {
      padding: 10,
      paddingRight: 25
    },
    mainChartLegentElement: {
      fontSize: '18px !important',
      marginLeft: theme.spacing.unit,
    }
  });
  
  export default withStyles(styles, { withTheme: true })(Dashboard);
  