@material-ui/core#Accordion JavaScript Examples

Helper = () => {
  const classes = useStyles();
  return (
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMore />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <MarkdownTypo className={classes.heading}>{D.accordionHelperTitle}</MarkdownTypo>
        <MarkdownTypo className={classes.secondaryHeading}>
          {D.accordionHelperSubtitle}
        </MarkdownTypo>
      </AccordionSummary>
      <AccordionDetails className={classes.accordionDetails}>
        <MarkdownTypo>{D.accordionHelperBody}</MarkdownTypo>
      </AccordionDetails>
    </Accordion>
  );
}

Accordions = ({ id, title, text, expanded, handleChange }) => {
  const styles = useStyles();

  return (
    <Accordion
      className={styles.accordion}
      key={id}
      expanded={expanded === id}
      onChange={handleChange(id)}
    >
      <AccordionSummary
        expandIcon={<ExpandMoreOutlined />}
        aria-controls='panel1bh-content'
        id='panel1bh-header'
      >
        <Typography component='span' className={styles.heading}>
          {title}
        </Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography component='span' className={styles.details}>
          {text}
        </Typography>
      </AccordionDetails>
    </Accordion>
  );
}

Tagger = ({ tags, onChange, selected, expand }) => {
  const classes = useStyles();
  return (
    <Accordion defaultExpanded={expand}>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography>Filter by Tags</Typography>
      </AccordionSummary>
      <AccordionDetails className={classes.root}>
        <FormControl component="fieldset">
          <RadioGroup onClick={onChange} value={selected}>
            {tags.map(({ name, value }) => (
              <FormControlLabel
                key={value}
                value={value}
                control={<Radio />}
                label={name}
              />
            ))}
          </RadioGroup>
        </FormControl>
      </AccordionDetails>
    </Accordion>
  );
}

Panel = ({
  index,
  expanded,
  currentPanel,
  handleChangePanel,
  title,
  variables,
  setPage,
  goToSeePage,
}) => {
  const classes = useStyles(currentPanel)();

  const [localExpanded, setLocalExpanded] = useState(currentPanel);

  const localHandleChange = (event, newExpanded) => {
    setLocalExpanded(newExpanded);
    handleChangePanel(index)(event, newExpanded);
  };

  useEffect(() => {
    setLocalExpanded(expanded);
  }, [expanded]);

  useEffect(() => {
    setLocalExpanded(currentPanel);
  }, [currentPanel]);

  const isNothingToDisplay = vars =>
    Object.entries(variables).filter(([key, value]) => !!value).length === 0;

  const emptyData = isNothingToDisplay(variables);

  return (
    <Accordion expanded={localExpanded} onChange={localHandleChange} className={classes.root}>
      <AccordionSummary className={classes.summary} expandIcon={<ExpandMore />}>
        {title}
      </AccordionSummary>
      <AccordionDetails className={classes.details}>
        {emptyData && <div classNam={classes.details}>{Dictionary.noDataCollected}</div>}
        {!emptyData &&
          Object.entries(variables).map(([key, value]) => {
            if (value)
              return (
                <div className={classes.item}>
                  <div className={classes.itemKey}>{`${key}: `}</div>
                  <div>
                    <b>{`${value}`}</b>
                  </div>
                </div>
              );
            return null;
          })}

        {!currentPanel && !emptyData && (
          <div className={classes.action}>
            <Button className={classes.button} onClick={() => setPage(goToSeePage)}>
              {Dictionary.goSeeItButton}
            </Button>
          </div>
        )}
      </AccordionDetails>
    </Accordion>
  );
}

/**
 * @function FAQs
 * @author Raymond Ndibe <[email protected]>
 *
 * @todo - describe function's signature
 */
function FAQs(props) {
  const classes = useStyles();

  const [state, setState] = React.useState({
    loading: true,
    faqs: [],
  });

  React.useEffect(() => {
    handleSetState(props.getFaqs({ t: props.t }));
  }, []);

  const handleSetState = obj => {
    if (obj) {
      Promise.resolve(obj).then(obj => {
        setState(state => ({ ...state, ...obj }));
      });
    }
  };

  const { loading, faqs } = state;
  const { t } = props;

  if (loading) {
    return <LoadingPage />;
  } else if (faqs.length > 0) {
    return (
      <Box className={classes.root}>
        <Container className={classes.containerStyle}>
          <Card className={classes.cardStyle}>
            <Typography className={classes.faqsHeadingStyle}>
              {t('faqs.title')}
            </Typography>
            {faqs.map(faq => (
              <Accordion>
                <AccordionSummary
                  expandIcon={
                    <>
                      <Typography>{t('faqs.answer')}</Typography>
                      <ExpandMoreIcon />
                    </>
                  }
                  aria-controls={t('faqs.answer')}
                  id={t('faqs.question')}
                >
                  <Typography className={classes.heading}>
                    {faq.question}
                  </Typography>
                </AccordionSummary>
                <AccordionDetails aria-label={t('faqs.answer')}>
                  <Typography
                    dangerouslySetInnerHTML={{ __html: faq.answer }}
                  ></Typography>
                </AccordionDetails>
              </Accordion>
            ))}
          </Card>
        </Container>
      </Box>
    );
  } else {
    return <ErrorPage error={t('faqs.errors.page_empty')} />;
  }
}

ConstructorListBasePrice = ({
  handleChange,
  basePriceToAdd,
  setBasePriceToAdd,
  expanded
}) => {
  const styles = useStyles();

  const priceHandleChange = (event) => {
    const { value } = event.target;
    setBasePriceToAdd(Number(value));
  };

  return (
    <Accordion
      expanded={expanded === 'basePrice'}
      onChange={handleChange('basePrice')}
    >
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls='basePricebh-content'
        id='basePricebh-header'
      >
        <Typography className={styles.heading}>Базова ціна</Typography>
        <Typography className={styles.secondaryHeading} />
      </AccordionSummary>
      <AccordionDetails>
        <TextField
          data-testid='basePrice'
          variant='outlined'
          className={`${styles.textField}`}
          label='Базова ціна (USD)'
          type='number'
          onChange={priceHandleChange}
          value={basePriceToAdd}
        />
      </AccordionDetails>
    </Accordion>
  );
}

useStyles = makeStyles({
  Accordion_a: {
    color: "red",
  },
  Accordion: {
    color: "black",
  },
})

MyList = (props) => {
  const classes = useStyles();
  const { breedName, setBreedName, setValue } = props;
  const [breeds, setBreeds] = useState(undefined);
  const [searchValue, setSearchValue] = useState();

  const [expandedPanel, setExpandedPanel] = useState(false);

  const handleAccordionChange = (key) => (event, isExpanded) => {
    setExpandedPanel(isExpanded ? key : false);
  };

  const handleChange = (event) => {
    let value = event.target.value.toLowerCase();
    setSearchValue(value);
  };

  useEffect(() => {
    axios.get("https://dog.ceo/api/breeds/list/all").then((response) => {
      console.log(response.data.message);
      setBreeds(response.data.message);
    });
  }, [searchValue]);

  return (
    <>
    <Scroll showBelow={250} />
      <Grid container justify="flex-end">
        <Grid item xs="12" md="4">
          <AutoSearchComplete
            searchValue={searchValue}
            setSearchValue={setSearchValue}
            breeds={breeds}
            handleChange={(e) => handleChange(e)}
          />
        </Grid>
      </Grid>
      {breeds ? (
        Object.keys(breeds)
          .filter((key) =>
            searchValue !== "" && searchValue !== undefined
              ? key === searchValue
              : "null"
          )
          .map((key, i) => {
            return (
              <Accordion
                key={i}
                style={{ margin: "1rem" }}
                onClick={() => {
                  setBreedName(key);
                }}
                expanded={expandedPanel === key}
                onChange={handleAccordionChange(key)}
              >
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls="panel1a-content"
                  id="key"
                >
                  <Typography
                    style={{ textTransform: "capitalize" }}
                    className={
                      breedName === key
                        ? classes.Accordion_a
                        : classes.Accordion
                    }
                  >
                    {key}
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <List>
                    {breeds[key].length === 0 ? (
                      <Typography>No Sub-Breads</Typography>
                    ) : (
                      breeds[key].map((breed) => (
                        <ListItem>
                          <ListItemAvatar>
                            <Avatar>
                              <Pets />
                            </Avatar>
                          </ListItemAvatar>
                          <ListItemText primary={breed} />
                        </ListItem>
                      ))
                    )}
                  </List>
                </AccordionDetails>
                <Divider />
                <Box p={2}>
                  <Button
                    variant="contained"
                    color="secondary"
                    onClick={() => setValue(1)}
                  >
                    Select
                  </Button>
                </Box>
              </Accordion>
            );
          })
      ) : (
        <Grid
          container
          direction="row"
          justify="center"
          alignItems="center"
          style={{ height: "60vh" }}
        >
          <Grid item>
            <CircularProgress color="secondary" size="4rem" />
          </Grid>
        </Grid>
      )}
    </>
  );
}

ConstructorListAccordion = ({ option, expanded, handleChange }) => {
  const classes = useStyles();
  const dispatch = useDispatch();

  const {
    selector,
    getItems,
    setOptionToAdd,
    optionToAdd,
    label,
    optionName,
    isRestrictions
  } = option;

  const tableTitles = config.tableHeadRowTitles.constructorElementList;

  const { items, currentPage, rowsPerPage, filter } = useSelector(selector);

  useEffect(() => {
    dispatch(
      getItems({
        pagination: {
          limit: rowsPerPage,
          skip: currentPage * rowsPerPage
        },
        limit: 20,
        skip: currentPage * rowsPerPage,
        filter
      })
    );
  }, [dispatch, currentPage, rowsPerPage, filter]);

  const checkboxChangeHandler = (e, id) => {
    e.stopPropagation();

    const possibleItems = optionToAdd.find((item) => item === id);
    if (possibleItems) {
      setOptionToAdd(optionToAdd.filter((item) => item !== id));
    } else {
      setOptionToAdd([...optionToAdd, id]);
    }
  };

  const elementItems = map(items, (item) => (
    <TableContainerRow
      image={
        item.images.thumbnail
          ? `${config.imagePrefix}${item.images.thumbnail}`
          : ''
      }
      key={item._id}
      id={item._id}
      name={item.name[0].value}
      additionalPrice={item.absolutePrice}
      available={item.available ? 'Так' : 'Ні'}
      showEdit={false}
      showDelete={false}
      showCheckbox
      checkBoxValue={optionToAdd}
      checkboxChangeHandler={checkboxChangeHandler}
    />
  ));

  if (isRestrictions) {
    return (
      <Accordion
        expanded={expanded === optionName}
        onChange={handleChange(optionName)}
      >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls={`${optionName}bh-content`}
          id={`${optionName}bh-header`}
        >
          <Typography className={classes.heading}>{label}</Typography>
          <Typography className={classes.secondaryHeading} />
        </AccordionSummary>
        <AccordionDetails />
      </Accordion>
    );
  }

  return (
    <Accordion
      expanded={expanded === optionName}
      onChange={handleChange(optionName)}
    >
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls={`${optionName}bh-content`}
        id={`${optionName}bh-header`}
      >
        <Typography className={classes.heading}>{label}</Typography>
        <Typography className={classes.secondaryHeading} />
      </AccordionSummary>
      <AccordionDetails className={classes.column}>
        {elementItems.length ? (
          <TableContainerGenerator
            pagination
            data-cy={`${optionName}table`}
            tableTitles={tableTitles}
            tableItems={elementItems}
          />
        ) : (
          <p>Відсутні</p>
        )}
      </AccordionDetails>
    </Accordion>
  );
}

ConstructorListPockets = ({
  handleChange,
  restrictionsToAdd,
  setRestrictionsToAdd,
  expanded
}) => {
  const classes = useStyles();
  const commonStyles = useCommonStyles();

  const deleteHandler = (id, positionId) => {
    setRestrictionsToAdd(
      restrictionsToAdd.filter(
        (item) =>
          item.currentPocketWithPosition.pocket._id !== id ||
          item.currentPocketWithPosition.position._id !== positionId
      )
    );
  };

  const elementItems = map(restrictionsToAdd, (item, index) => (
    <TableRow key={index}>
      <TableCell>
        <Avatar
          src={`${config.imagePrefix}${item.currentPocketWithPosition?.pocket.images.thumbnail}`}
        >
          <ImageIcon />
        </Avatar>
      </TableCell>
      <TableCell>
        {item.currentPocketWithPosition?.pocket.name[0].value}
      </TableCell>
      <TableCell>
        {item.currentPocketWithPosition?.position.name[0].value}
      </TableCell>
      <TableCell>
        {item.currentPocketWithPosition?.pocket.absolutePrice}
      </TableCell>
      <TableCell>
        <CustomizedDeleteIcon
          onClickHandler={() => {
            deleteHandler(
              item.currentPocketWithPosition.pocket._id,
              item.currentPocketWithPosition.position._id
            );
          }}
        />
      </TableCell>
    </TableRow>
  ));
  return (
    <Accordion
      expanded={expanded === 'pocket'}
      onChange={handleChange('pocket')}
    >
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls='pocketbh-content'
        id='pocketbh-header'
      >
        <Typography className={classes.heading}>Кишені</Typography>
        <Typography className={classes.secondaryHeading} />
      </AccordionSummary>
      <AccordionDetails className={classes.column}>
        {elementItems.length ? (
          <TableContainerGenerator
            pagination
            data-cy='pockettable'
            tableTitles={tableTitles}
            tableItems={elementItems}
          />
        ) : (
          <p className={commonStyles.noRecords}>{NO_POCKET_MESSAGE}</p>
        )}
        <ConstructorListRestrictions
          restrictionsToAdd={restrictionsToAdd}
          setRestrictionsToAdd={setRestrictionsToAdd}
        />
      </AccordionDetails>
    </Accordion>
  );
}

render() {
        let notificationBar;
        if (this.state.errorMessage) {
            notificationBar = <Alert variant="filled" severity="error" onClose={() => { this.setState({ errorMessage: '' }) }}>{this.state.errorMessage}</Alert>
        } else {
            notificationBar = <div></div>
        }
        return (
            <div className="layout-wrapper">
                <div className="header-wrapper">
                    <Header />
                </div>
                <div className="notification-bar-wrapper">
                    {notificationBar}
                </div>
                <div className="accordion-wrapper">
                    <Accordion expanded={this.state.expanded.includes('most-active-stock-panel')} onChange={this.handlePanelChange('most-active-stock-panel')}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="most-active-stock-panel-content"
                            id="most-active-stock-panel-header">

                            <Grid item xs={5} md={4}>
                                <Typography className="accordion-heading">Most Active Stocks</Typography>
                            </Grid>

                            <Grid item xs={7} md={4} className="second-heading-wrapper">
                                <Typography className="accordion-second-heading" component={'span'}>
                                    Most Active Stocks in
                                <FormControl className="days-dropdown">
                                        <Select
                                            labelId="demo-simple-select-placeholder-label-label"
                                            id="demo-simple-select-placeholder-label"
                                            value={this.state.mostActiveDaysRange}
                                            onClick={(e) => this.handleClickDaysRange(e)}
                                            onChange={(e) => this.handleSelectDaysRange(e, 'mostActive')}
                                            MenuProps={{ disableScrollLock: true }}
                                        >
                                            <MenuItem value={1}>1 Day</MenuItem>
                                            <MenuItem value={7}>1 Week</MenuItem>
                                            <MenuItem value={14}>2 Weeks</MenuItem>
                                            <MenuItem value={30}>1 Month</MenuItem>
                                            <MenuItem value={90}>3 Months</MenuItem>
                                            <MenuItem value={10000}>From 11/12/2019</MenuItem>
                                        </Select>
                                    </FormControl>
                                </Typography>
                            </Grid>

                        </AccordionSummary>

                        <AccordionDetails>
                            <div className="most-active-stocks-tabs-wrapper">
                                <MostActiveStocksTabs />
                            </div>
                        </AccordionDetails>

                    </Accordion>

                    <Accordion expanded={this.state.expanded.includes('stock-details-panel')} onChange={this.handlePanelChange('stock-details-panel')}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="stock-details-panel-content"
                            id="stock-details-panel-header">

                            <Grid item xs={5} md={4}>
                                <Typography className="accordion-heading">Stock Details</Typography>
                            </Grid>

                            <Grid item xs={7} md={4} className="second-heading-wrapper">
                                {/* <Typography className="accordion-second-heading" component={'span'}>
                                Chart with ARK Trade History</Typography> */}
                            </Grid>

                        </AccordionSummary>

                        <AccordionDetails>
                            <div className="stock-details-wrapper">
                                <StockDetails />
                            </div>
                        </AccordionDetails>

                    </Accordion>

                    <Accordion expanded={this.state.expanded.includes('data-grid-panel')} onChange={this.handlePanelChange('data-grid-panel')}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="data-grid-panel-content"
                            id="data-grid-panel-header">

                            <Grid item xs={5} md={4}>
                                <Typography className="accordion-heading">Transactions Table</Typography>
                            </Grid>

                            <Grid item xs={7} md={4} className="second-heading-wrapper">
                                <Typography className="accordion-second-heading">All ARK Transactions</Typography>
                            </Grid>

                        </AccordionSummary>

                        <AccordionDetails>
                            <DataGrid />
                        </AccordionDetails>

                    </Accordion>

                </div>

                <Grid container className="sticky-footer">

                    <Grid item xs={3} md={3}>
                        <p className="disclaimer">Disclaimer: This web is built for education only.<br></br>The author takes no responsibility for financial decisions.</p>
                    </Grid>

                    <Grid item xs={6} md={6} className="donation-section">
                        <div className="donation" onClick={this.handleDonationSectionClick}>
                            <form action="https://www.paypal.com/donate" method="post" target="_top">
                                <input type="hidden" name="cmd" value="_donations" />
                                <input type="hidden" name="business" value="[email protected]" />
                                <input type="hidden" name="currency_code" value="USD" />
                                <Button size="small" variant="contained" color="primary" className="emoji-submit-button" type="submit" ref={this.coffeeEmoji}>
                                    <span name="submit" role="img" aria-label="coffee">Like this? <br></br>Pls buy me a coffee~☕</span>
                                </Button>
                                <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
                            </form>
                        </div>
                    </Grid>

                    <Grid item xs={3} md={3} className="additonal-info-section">
                        <div className='info-container'>
                            <p className='info-version'>
                                <Button color="secondary">
                                    <a href="https://github.com/KarlZhu-SE/ark-funds-monitor">Github Link</a>
                                </Button>
                                {/* &nbsp;&nbsp;Version: {packageJson.version} */}
                            </p>
                            <p className='info-update-date'>Latest ARK Data: {arkData[0]['Date']}</p>
                        </div>
                    </Grid>
                </Grid>

            </div>
        );
    }

ProductDescription = ({ product, currentSizeIndex }) => {
  const styles = useStyles();
  const { mainMaterial, innerMaterial, bottomMaterial, sizes, translationsKey } = product;
  const currentWeight =
    sizes && currentSizeIndex >= 0 ? sizes[currentSizeIndex].size.weightInKg : '';
  const currentVolume =
    sizes && currentSizeIndex >= 0 ? sizes[currentSizeIndex].size.volumeInLiters : '';
  const { t } = useTranslation();

  return (
    <div className={styles.details}>
      <div className={styles.description}>
        <Accordion>
          <AccordionSummary
            expandIcon={<ExpandMoreOutlined />}
            aria-controls='panel1a-content'
            id='panel1a-header'
          >
            <Typography className={styles.title}>
              {t('product.productDescription.description')}{' '}
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography component='div' className={styles.text}>
              {parse(
                String(t(`${translationsKey}.description`))
                  .replace(/&nbsp;/g, '')
                  .replace(/;/g, '. ')
              )}
            </Typography>
          </AccordionDetails>
        </Accordion>
      </div>

      <div className={styles.description}>
        <Accordion>
          <AccordionSummary
            expandIcon={<ExpandMoreOutlined />}
            aria-controls='panel1a-content'
            id='panel1a-header'
          >
            <Typography className={styles.title}>
              {t('product.productDescription.material')}
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography component='div' className={styles.text}>
              <Detail
                subtitle={t('product.productDescription.mainMaterial')}
                description={t(`${mainMaterial.material.translationsKey}.name`)}
              />
              <Detail
                subtitle={t('product.productDescription.innerMaterial')}
                description={t(`${innerMaterial.material.translationsKey}.name`)}
              />
              <Detail
                subtitle={t('product.productDescription.bottomMaterial')}
                description={t(`${bottomMaterial.material.translationsKey}.name`)}
              />
            </Typography>
          </AccordionDetails>
        </Accordion>
      </div>

      <div className={styles.description}>
        {currentVolume && currentWeight && product.available ? (
          <Accordion>
            <AccordionSummary
              expandIcon={<ExpandMoreOutlined />}
              aria-controls='panel1a-content'
              id='panel1a-header'
            >
              <Typography className={styles.title}>
                {t('product.productDescription.measurement')}{' '}
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography component='div' className={styles.text}>
                <Detail
                  subtitle={t('product.weight.volumeLabel')}
                  description={`${currentVolume}`}
                />
                <Detail
                  subtitle={t('product.weight.weightLabel')}
                  description={`${currentWeight}`}
                />
              </Typography>
            </AccordionDetails>
          </Accordion>
        ) : null}
      </div>
    </div>
  );
}

render() {
    return(
      <>
      <Card>
        {this.state.loading ? <LinearProgress /> : ""}
        <CardContent>
          <Row>
            <Col sm={{span:3}}>
              <Expiries
                symbol={this.props.quote.symbol} 
                onExpiryChange={this.handleExpiryChange}
              />
            </Col>
            <Col sm={{span:2, offset:5}}>
              <EditLayout onLayoutChange={this.handleLayoutChange}/>
            </Col>
            <Col sm={{span:2}}>
              <Positions 
                positions={this.props.positions}
                onRemovePosition={this.props.onRemovePosition}
              />
            </Col>
          </Row>
        </CardContent>
      </Card>
      <br />
      <Accordion expanded={this.state.displayTable} onChange={this.accChange} >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant="h6" display="block" gutterBottom>
            Option Table 
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Grid container>
            <Grid sm={12}>
              {!this.state.calls[0] ? this.errorMessage() :  
                <OptionTable
                layout={this.state.layout}
                onAddToFlask={this.handleAddToFlask}
                calls={this.state.calls}
                puts={this.state.puts}
                symbol={this.state.symbol}
                expiry={this.state.expiry}
                quote={this.props.quote}
                onAddPosition={this.handleAddPosition}
              />
              }
            </Grid>
          </Grid>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant="h6" display="block" gutterBottom>
            Implied Volatility Skew
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Grid container>
          {!this.state.calls[0] ? this.errorMessage() :
            <>
              <Grid item xs={1}></Grid>
              <Grid item sm={11}>
                <center>
                  <h6>IV skew for&nbsp;
                    <div style={{color:"royalblue", display:"inline"}}>
                      {this.state.symbol} {this.state.expiry} 
                    </div>
                    &nbsp;expiry option chain</h6>
                </center>
                <IVSkewChart data={this.state.ivSkewData}/>
              </Grid>
            </>
          }
          </Grid>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant="h6" display="block" gutterBottom>
            Greeks
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Grid container>
            <Grid item sm={4}></Grid>
            <Grid item sm={4}>
              {!this.state.calls[0]? "" : 
              <center>
                <Select
                  value={this.state.greeksChart}
                  onChange={this.handleGreeksChartChange}
                >
                  <MenuItem value={"calls"}>calls</MenuItem>
                  <MenuItem value={"puts"}>puts</MenuItem>
                </Select>
              </center>
              }
            </Grid>
            <Grid item sm={4}></Grid>
            {!this.state.calls[0] ? this.errorMessage() :
              <>
                <Grid item sm={1}></Grid>
                <Grid item sm={10}>
                  <br />
                  <center>
                    <h6>Greeks for&nbsp;
                      <div style={{color:"royalblue", display:"inline"}}>
                        {this.state.symbol} {this.state.expiry} 
                      </div>
                      &nbsp;expiry option chain (rounded to 2 places)</h6>
                  </center>
                  <GreeksChart
                    data={this.state.greeksChart === "calls" ? 
                      this.state.callGreeksData :
                      this.state.putGreeksData}
                  />
                </Grid>
              </>
            }
          </Grid>
        </AccordionDetails>
      </Accordion>
      <br />
      </>
    )
  }

export function MetaColInfo(props) {
  const classes = useStyles();
  const [col, setCol] = useState({...props.col});
  const formHeaders = props.formHeaders;

  const getType = (val) => {
    switch (val) {
      case "varchar":
        return "text";
      default:
        return val;
    }
  };

  const getTypeLength = (type) => {
    const parsedType = getType(type);
    if (TypeLengthMap[type]) {
      return TypeLengthMap[type];
    }

    return "";
  }

  const getFormat = (type) => {
    switch (type) {
      case "datetime":
        return "yyyy-MM-dd HH:mm:ss";
      case "date":
        return "yyyy-MM-dd";
      case "time":
        return "HH:mm:ss";
      default:
        return "";
    }
  }

  const isDateType = (type) => {
    return ["datetime", "date", "time"].indexOf(type) < 0;
  }

  const handleChange = (e) => {
    const updatedCol = {
      ...col,
      [e.target.name]: e.target.type === "checkbox" ? e.target.checked : e.target.value,
    };

    setCol(updatedCol);
  };

  return (
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls={`column${col.id} - ${col.columnName}`}
        id={`column-${col.id}`}        
      >
        <div className={classes.headerWrap}>
          <Typography className={classes.heading}>
            {col.columnName}
          </Typography>
          <div>
            {col.type && 
              <Chip size="small" label={`Type: ${col.type}`} variant="outlined" />
            }
          </div>
        </div>        
      </AccordionSummary>
      <AccordionDetails className={classes.formWrap}>
        <FormControl className={classes.formControl}>
          <InputLabel
            htmlFor={`meta-${col.id}-input-originName`}
            className="label"
          >
            {formHeaders[0].name}
          </InputLabel>
          <Input
            id={`meta-${col.id}-input-originName`}
            className="form"
            name="originName"
            value={col.originalColumnName}
            disabled={true}
          />
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel
            htmlFor={`meta-${col.id}-input-columnName`}
            className="label"
          >
            {formHeaders[1].name}
          </InputLabel>
          <Input
            id={`meta-${col.id}-input-columnName`}
            className="form"
            name="columnName"
            value={col.columnName}
            onChange={handleChange}
          />
          <FormHelperText className="helpText">
            {formHeaders[1].tooltip}
          </FormHelperText>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel id={`label-meta-${col.id}-input-type`} className="label">
            {formHeaders[2].name}
          </InputLabel>
          <Select
            labelId={`label-meta-${col.id}-input-type`}
            id={`meta-${col.id}-input-type`}
            name="type"
            value={getType(col.type)}
            className="form"
            onChange={handleChange}
          >
            <MenuItem value={"int"}>숫자(정수)</MenuItem>
            <MenuItem value={"double"}>숫자(부동소수)</MenuItem>
            <MenuItem value={"text"}>문자</MenuItem>
            <MenuItem value={"datetime"}>날짜(시간포함)</MenuItem>
            <MenuItem value={"date"}>날짜(시간 미포함)</MenuItem>
            <MenuItem value={"time"}>시간(시간 미포함)</MenuItem>
          </Select>
        </FormControl>

        {isDateType(col.type) ? 
          <FormControl className={classes.formControl}>
            <InputLabel htmlFor={`meta-${col.id}-input-length`} className="label">
              {formHeaders[3].name}
            </InputLabel>
            <Input
              id={`meta-${col.id}-input-length`}
              value={col.length || getTypeLength(col.type)}
              name="length"
              className="form"
              onChange={handleChange}
            />
          </FormControl>
          :
          <FormControl className={classes.formControl}>
            <InputLabel htmlFor={`meta-${col.id}-input-format`} className="label">
              {formHeaders[4].name}
            </InputLabel>
            <Input
              id={`meta-${col.id}-input-format`}
              value={col.format || getFormat(col.type)}
              name="format"
              className="form"
              onChange={handleChange}
            />
            <FormHelperText className="helpText">
              {formHeaders[4].tooltip}
            </FormHelperText>
          </FormControl>
        }

        <FormControlLabel
          className={`${classes.formControl} options`}
          control={
            <Checkbox
              id={`meta-${col.id}-input-nullable`}
              checked={col.isNullable}
              name="isNullable"
              onChange={handleChange}
              color="primary"
            />
          }
          label={
            <Typography style={{ fontSize: "0.875rem" }}>빈값 허용</Typography>
          }
        />
        <FormControlLabel
          className={`${classes.formControl} options`}
          control={
            <Checkbox
              id={`meta-${col.id}-input-unique`}
              checked={col.isUnique}
              name="isUnique"
              onChange={handleChange}
              color="primary"
            />
          }
          label={
            <Typography style={{ fontSize: "0.875rem" }}>고유값</Typography>
          }
        />
        <FormControlLabel
          className={`${classes.formControl} options`}
          control={
            <Checkbox
              id={`meta-${col.id}-input-hidden`}
              checked={col.isHidden}
              name="isHidden"
              onChange={handleChange}
              color="primary"
            />
          }
          label={
            <Typography style={{ fontSize: "0.875rem" }}>숨김(미제공)</Typography>
          }
        />
      </AccordionDetails>
    </Accordion>
  )
}

render() {
		const { classes } = this.props;
		let itemKey = 0;
		let buttons = [];
		if (
			this.state.game.Properties.Open &&
			this.state.game.Properties.ActiveBans &&
			this.state.game.Properties.ActiveBans.length > 0
		) {
			buttons.push(
				<Typography key="banned-notice" style={noticeClass}>
					You can't join because you banned or are banned by a player.
				</Typography>
			);
		}
		if (
			!this.state.game.Properties.Closed &&
			this.state.game.Properties.FailedRequirements
		) {
			buttons.push(
				<Typography
					variant="subtitle2"
					key="requirement-notice"
					style={noticeClass}
				>
					You can't join this game because{" "}
					{this.state.game.Properties.FailedRequirements.map((req) => {
						return this.failureExplanations()[req];
					}).join(" ")}
				</Typography>
			);
		}

		if (!this.state.dead) {
			buttons.push(
				<Button
					variant="outlined"
					style={{
						marginRight: "16px",
						minWidth: "100px",
						marginBottom: "4px",
					}}
					color="primary"
					onClick={this.viewGame}
					key={itemKey++}
				>
					View
				</Button>
			);
			if (this.state.member) {
				buttons.push(
					<Button
						variant="outlined"
						style={{
							marginRight: "16px",
							minWidth: "100px",
							marginBottom: "4px",
						}}
						color="primary"
						onClick={this.renameGame}
						key={itemKey++}
					>
						Rename
					</Button>
				);
			}
		}
		let replaceablePlayers = 0;
					if (this.state.game.Properties.Members !== null) {
					replaceablePlayers = this.state.game.Properties.Members.filter(member => 
  					member.Replaceable == true
					).length;
					} else {
						replaceablePlayers = 0;
					}
		if (!this.state.game.Properties.Closed || replaceablePlayers > 0) {
			buttons.push(
				<Button
					variant="outlined"
					style={{
						marginRight: "16px",
						minWidth: "100px",
						marginBottom: "4px",
					}}
					color="primary"
					onClick={this.shareNative}
					key={itemKey++}
				>
					Invite
				</Button>
			);
		}
		let hasInviteDialog = false;
		this.state.game.Links.forEach((link) => {
			if (link.Rel === "join") {
				if (
					this.state.game.Properties.PhaseLengthMinutes < 60 * 12 ||
					(this.state.game.Properties.NonMovementPhaseLengthMinutes !== 0 &&
						this.state.game.Properties.NonMovementPhaseLengthMinutes < 60 * 12)
				) {
					buttons.unshift(
						<Typography key="deadline-warning" style={warningClass}>
							WARNING: This game has short deadlines (less than 12 hours). If it
							starts while you're unavailable, you might miss parts of the game
							greatly impacting your reliability score.
						</Typography>
					);
				}
				if (
					!this.state.game.Properties.Private &&
					this.state.game.Properties.MinReliability === 0 &&
					Globals.userStats.Properties.Reliability >= 10
				) {
					buttons.unshift(
						<Typography key="reliability-warning" style={warningClass}>
							WARNING: We advise you to join a different game, because this game
							might have (some) absent players. You have high reliability so can
							join a better game.
						</Typography>
					);
				}
				buttons.push(
					<Button
						key={itemKey++}
						variant="outlined"
						color="primary"
						style={{ marginRight: "16px", minWidth: "100px" }}
						onClick={(_) => {
							this.joinGame(link);
						}}
					>
						Join
					</Button>
				);
			} else if (link.Rel === "edit-newest-phase-deadline-at") {
				buttons.push(
					//TODO: Add confirmdialog.js before we accidentally move a turn forwards.. (how?)
					<React.Fragment>
						<Divider style={{marginBottom: "4px"}} />
						<Button
							key={itemKey++}
							variant="contained"
							color="primary"
							style={{
								marginRight: "16px",
								minWidth: "100px",
								marginBottom: "4px",
							}}
							onClick={(_) => {
								this.nextturn(link);
							}}
						>
							End Current Phase
						</Button>
						<Button
							key={itemKey++}
							variant="contained"
							color="primary"
							style={{
								marginRight: "16px",
								minWidth: "100px",
								marginBottom: "4px",
							}}
							onClick={(_) => {
								this.reschedule(link);
							}}
						>
							Change deadline
						</Button>
					</React.Fragment>
				);
			} else if (link.Rel === "leave") {
				buttons.push(
					<Button
						key={itemKey++}
						variant="outlined"
						color="primary"
						style={{
							marginRight: "16px",
							minWidth: "100px",
							marginBottom: "4px",
						}}
						onClick={(_) => {
							this.leaveGame(link);
						}}
					>
						Leave
					</Button>
				);
			} else if (link.Rel === "delete-game") {
				buttons.push(
					//TODO: add confirmdialog.js before we accidentally DELETE THE WHOLE (ONGOING) GAME (how)?
					<Button
						key={itemKey++}
						variant="outlined"
						color="primary"
						style={{
							marginRight: "16px",
							minWidth: "100px",
							marginBottom: "4px",
						}}
						onClick={(_) => {
							this.deleteGame(link);
						}}
					>
						Delete
					</Button>
				);
			} else if (
				link.Rel === "invite-user" ||
				link.Rel.indexOf("uninvite-") === 0
			) {
				hasInviteDialog = true;
			}
		});
		if (hasInviteDialog) {
			buttons.push(
				<Button
					key={itemKey++}
					variant="contained"
					color="primary"
					style={{
						marginRight: "16px",
						minWidth: "100px",
						marginBottom: "4px",
					}}
					onClick={(_) => {
						this.manageInvitations();
					}}
				>
					Assign players
				</Button>
			);
		}
		const buttonDiv = (
			<div
				key={itemKey++}
				style={{
					dispay: "flex",
					justifyContent: "space-evenly",
					marginBottom: "8px",
				}}
			>
				{buttons}
			</div>
		);

		let summary = (
			<div
				style={{
					display: "flex",
					flexDirection: "column",
					width: "100%",

					marginTop: "8px",
				}}
			>
				{((_) => {
					if (this.state.game.Properties.Started && replaceablePlayers == 0) {
						return (
							<React.Fragment>
								{/* IF STARTED */}
								<div
									style={{
										display: "flex",
										flexDirection: "row",
										justifyContent: "space-between",
									}}
								>
									{this.state.member && this.state.member.UnreadMessages > 0 ? (
										<Badge
											key={itemKey++}
											badgeContent={this.state.member.UnreadMessages}
											color="primary"
											style={{
												maxWidth: "calc(100% - 70px)",
											}}
										>
											<Typography
												textroverflow="ellipsis"
												noWrap
												style={{
													color: "rgba(40, 26, 26, 1)",
												}}
											>
												{helpers.gameDesc(this.state.game)}
											</Typography>
										</Badge>
									) : (
										<Typography
											key={itemKey++}
											textroverflow="ellipsis"
											noWrap={true}
											style={{
												minWidth: "60px",
												color: "rgba(40, 26, 26, 1)",
											}}
										>
											{helpers.gameDesc(this.state.game)}
										</Typography>
									)}

									<div
										id="Timer"
										key={itemKey++}
										style={{
											alignSelf: "center",
											display: "flex",
											alignItems: "center",
											color: "#281A1A",
										}}
									>
										{this.state.member &&
										this.state.game.Properties.Started &&
										!this.state.game.Properties.Finished ? (
											this.state.member.NewestPhaseState.OnProbation ? (
												<SvgIcon>
													<path
														d="M2.98188996,2.24133335 L21.3666663,20.6261097 L20.0261097,21.9666663 L19.0573333,20.998 L19,21 L5,21 C3.95,21 3.0822314,20.1799587 3.00551277,19.1486946 L3,19 L3,5 L3.00233335,4.942 L1.64133335,3.58188996 L2.98188996,2.24133335 Z M12,1 C13.235,1 14.2895,1.7581 14.75196,2.828465 L14.82,3 L19,3 C20.05,3 20.9177686,3.82004132 20.9944872,4.85130541 L21,5 L21,17.963 L16.037,13 L17,13 L17,11 L14.037,11 L12.037,9 L17,9 L17,7 L10.037,7 L6.037,3 L9.18,3 C9.579,1.898 10.5917,1.0848 11.80656,1.006235 L12,1 Z M13.0593333,15 L7,15 L7,17 L15.0593333,17 L13.0593333,15 Z M11.0593333,13 L9.06033335,11 L7,11 L7,13 L11.0593333,13 Z M12,3 C11.45,3 11,3.45 11,4 C11,4.55 11.45,5 12,5 C12.55,5 13,4.55 13,4 C13,3.45 12.55,3 12,3 Z"
														id="Shape"
														fill="#b71c1c"
														fillRule="nonzero"
													></path>
												</SvgIcon>
											) : this.state.member.NewestPhaseState.ReadyToResolve ? (
												<SvgIcon>
													<path
														d="M9,0 C10.3,0 11.4,0.84 11.82,2 L11.82,2 L16,2 C17.1045695,2 18,2.8954305 18,4 L18,4 L18,18 C18,19.1045695 17.1045695,20 16,20 L16,20 L2,20 C0.8954305,20 0,19.1045695 0,18 L0,18 L0,4 C0,2.8954305 0.8954305,2 2,2 L2,2 L6.18,2 C6.6,0.84 7.7,0 9,0 Z M13.4347826,7 L7.70608696,12.7391304 L4.56521739,9.60869565 L3,11.173913 L7.70608696,15.8695652 L15,8.56521739 L13.4347826,7 Z M9,2 C8.44771525,2 8,2.44771525 8,3 C8,3.55228475 8.44771525,4 9,4 C9.55228475,4 10,3.55228475 10,3 C10,2.44771525 9.55228475,2 9,2 Z"
														fill="#281A1A"
														id="Combined-Shape"
													></path>
												</SvgIcon>
											) : (
												<StartedAtIcon />
											)
										) : (
											""
										)}
										<Typography
											variant="body2"
											style={{
												paddingLeft: "2px",
												color: "rgba(40, 26, 26, 1)",
											}}
										>
											{this.state.game.Properties.Finished
												? helpers.minutesToDuration(
														-this.state.game.Properties.FinishedAgo /
															1000000000 /
															60,
														true
												  )
												: helpers.minutesToDuration(
														this.state.game.Properties.NewestPhaseMeta[0]
															.NextDeadlineIn /
															1000000000 /
															60,
														true
												  )}
										</Typography>
									</div>
								</div>
								<div key={itemKey++} style={secondRowSummaryClass}>
									<Typography
										textroverflow="ellipsis"
										noWrap={true}
										display="inline"
										variant="caption"
										id="variant"
										style={secondRowSummaryColorClass}
									>
										{this.state.game.Properties.Variant}{" "}
										{helpers.phaseLengthDisplay(this.state.game.Properties)}
									</Typography>
									<div style={summaryIconsAndPhaseClass}>
										<div style={summaryIconsClass}>{this.getIcons()}</div>
										<Typography
											variant="caption"
											style={secondRowSummaryColorClass}
										>
											{this.state.game.Properties.NewestPhaseMeta[0].Season}{" "}
											{this.state.game.Properties.NewestPhaseMeta[0].Year},{" "}
											{this.state.game.Properties.NewestPhaseMeta[0].Type}
										</Typography>
									</div>
								</div>
								{!this.state.member || this.state.game.Properties.Mustered ? (
									""
								) : (this.state.game.Properties.Members || []).find((m) => {
										return m.User.Id === Globals.user.Id;
								  }).NewestPhaseState.ReadyToResolve ? (
									<Typography
										className={this.props.classes.sixteenBySixteenClass}
									>
										Confirmed ready <ConfirmedReadyIcon />
									</Typography>
								) : (
									<Button
										variant="outlined"
										style={{
											marginRight: "16px",
											minWidth: "100px",
											marginBottom: "4px",
										}}
										color="primary"
										onClick={(ev) => {
											ev.stopPropagation();
											helpers
												.safeFetch(
													helpers.createRequest(
														"/Game/" +
															this.state.game.Properties.ID +
															"/Phase/" +
															this.state.game.Properties.NewestPhaseMeta[0]
																.PhaseOrdinal +
															"/PhaseState",
														{
															headers: {
																"Content-Type": "application/json",
															},
															method: "PUT",
															body: JSON.stringify({
																ReadyToResolve: true,
															}),
														}
													)
												)
												.then(this.reloadGame);
										}}
										key={itemKey++}
									>
										Confirm ready
									</Button>
								)}
							</React.Fragment>
						);
					} else {
						return (
							<React.Fragment>
								{/* IF STARTED */}
								<div
									style={{
										display: "flex",
										flexDirection: "row",
										justifyContent: "space-between",
									}}
								>
									<Typography
										key={itemKey++}
										textroverflow="ellipsis"
										noWrap={true}
										style={{}}
									>
										{helpers.gameDesc(this.state.game)}
									</Typography>

									<div
										id="Join"
										key={itemKey++}
										style={{
											alignSelf: "center",
											display: "flex",
											alignItems: "center",
										}}
									>
										<NumMembersIcon style={replaceablePlayers == 0 ? {color: "primary"} : {color: "red"} } />
										<Typography variant="body2" style={replaceablePlayers == 0 ? { paddingLeft: "2px", } : { paddingLeft: "2px", color: "red"}}>
											{replaceablePlayers == 0 ? this.state.game.Properties.NMembers : this.state.game.Properties.NMembers - replaceablePlayers}/
											{this.variant.Properties.Nations.length}{" "}
										</Typography>
									</div>
								</div>
								<div
									style={{
										display: "flex",
										flexDirection: "row",
										justifyContent: "space-between",
									}}
								>
									<Typography
										textroverflow="ellipsis"
										noWrap={true}
										display="inline"
										variant="caption"
										style={{
											color: "rgba(40, 26, 26, 0.7)",
										}}
									>
										{this.state.game.Properties.Variant}{" "}
										{helpers.phaseLengthDisplay(this.state.game.Properties)}
									</Typography>
									<div> {this.getIcons()}</div>
								</div>
							</React.Fragment>
						);
					}
				})()}

				<div></div>
			</div>
		);

		let gameView = (
			<Zoom in={this.state.viewOpen} mountOnEnter unmountOnExit>
				<div
					style={{
						position: "fixed",
						zIndex: 1300,
						right: 0,
						bottom: 0,
						top: 0,
						left: 0,
						background: "#ffffff",
					}}
				>
					<Game
						onChangeReady={this.reloadGame}
						onJoinGame={this.reloadGame}
						onLeaveGame={(_) => {
							if (this.state.game.Properties.Members.length > 1) {
								this.reloadGame();
							} else {
								this.setState({ dead: true });
							}
						}}
						unreadMessagesUpdate={this.reloadGame}
						gamePromise={(reload) => {
							if (reload) {
								return helpers
									.safeFetch(
										helpers.createRequest(
											this.state.game.Links.find((l) => {
												return l.Rel === "self";
											}).URL
										)
									)
									.then((resp) => resp.json());
							} else {
								return new Promise((res, rej) => {
									res(this.state.game);
								});
							}
						}}
						close={this.closeGame}
					/>
				</div>
			</Zoom>
		);

		if (this.props.summaryOnly) {
			return (
				<React.Fragment>
					<div style={{ width: "100%" }} onClick={this.viewGame}>
						{summary}
					</div>
					{this.state.viewOpen ? gameView : ""}
				</React.Fragment>
			);
		}
		return (
			<React.Fragment>
				<Accordion
					key="game-details"
					onChange={(ev, exp) => {
						this.setState({ expanded: exp });
					}}
					square
					style={{
						border: "none",
						boxShadow: "none",
						padding: "0px",
						margin: "0px",
					}}
				>
					<AccordionSummary
						classes={{
							root: classes.accordionSummaryRoot,
							content: classes.accordionSummaryContent,
						}}
						expandIcon={<ExpandIcon />}
					>
						{summary}
					</AccordionSummary>
					<AccordionDetails className={classes.accordionDetails}>
						{this.state.expanded ? (
							<div>
								<div
									style={{
										display: "flex",
										flexDirection: "row",
										justifyContent: "space-between",
										flexWrap: "wrap",
										maxWidth: "960px",
										width: "100%",
										marginBottom: "16px",
									}}
								>
									<div
										style={{
											maxWidth: "460px",
										}}
									>
										{buttonDiv}
										{this.state.dead ? (
											<Typography style={{ color: "red" }}>Deleted</Typography>
										) : (
											""
										)}
										<GameMetadata
											game={this.state.game}
											withKickButtons={true}
											reloadGame={this.reloadGame}
										/>
									</div>
								</div>
								<Divider />
							</div>
						) : (
							""
						)}
					</AccordionDetails>
				</Accordion>
				{this.state.viewOpen ? gameView : ""}
				<NationPreferencesDialog
					parentCB={(c) => {
						this.nationPreferencesDialog = c;
					}}
					onSelected={null}
				/>
				{this.state.member ? (
					<RenameGameDialog
						onRename={this.reloadGame}
						game={this.state.game}
						parentCB={(c) => {
							this.renameGameDialog = c;
						}}
					/>
				) : (
					""
				)}
				{this.state.game.Properties.GameMaster &&
				this.state.game.Properties.GameMaster.Id === Globals.user.Id ? (
					<React.Fragment>
						<RescheduleDialog
							parentCB={(c) => {
								this.rescheduleDialog = c;
							}}
							onSubmit={this.onRescheduleSubmit}
						/>
						<ManageInvitationsDialog
							game={this.state.game}
							parentCB={(c) => {
								this.manageInvitationsDialog = c;
							}}
							reloadGame={this.reloadGame}
						/>
					</React.Fragment>
				) : (
					""
				)}
			</React.Fragment>
		);
	}

render() {
		const { classes } = this.props;
		if (this.state.open) {
			return (
				<Dialog
					onEntered={helpers.genOnback(this.close)}
					open={this.state.open}
					className="find-game-dialog"
					disableBackdropClick={false}
					classes={{
						paper: classes.paper,
					}}
					onClose={this.close}
				>
					<DialogTitle>Game & Player info</DialogTitle>
					<DialogContent>
						<Typography
							variant="subtitle2"
							style={{ fontWeight: "bold", paddingBottom: "8px" }}
						>
							Game settings
						</Typography>
						<GameMetadata game={this.props.game} noplayerlist="true" />

						<Accordion
							onChange={(ev, exp) => {
								this.setState({ expanded: exp });
								console.log(this);
							}}
							square
							style={{
								border: "none",
								boxShadow: "none",
								padding: "0px",
								margin: "0px",
								position: "inherit",
							}}
						>
							<AccordionSummary
								classes={{
									root: classes.accordionSummaryRoot,
									content: classes.accordionSummaryContent,
								}}
								style={{
									border: "none",
									boxShadow: "none",
									padding: "0px",
									margin: "0px",
								}}	
								expandIcon={<ExpandIcon />}
							>
								<Typography variant="subtitle2" style={{fontWeight: "bold", marginTop: "8px"}}>Variant rules</Typography>
							</AccordionSummary>
							<AccordionDetails className={classes.accordionDetails} style={{padding: "0"}}>
								{this.state.expanded ? (
															<Typography variant="subtitle2" style={{ paddingBottom: "8px" }}>

										

											{this.props.variant.Properties.Rules}
										
									</Typography>
								) : (
									""
								)}
							</AccordionDetails>
						</Accordion>

						<Typography
							variant="subtitle2"
							style={{
								fontWeight: "bold",
								paddingBottom: "8px",
								paddingTop: "8px",
							}}
						>
							Players
						</Typography>
						<Typography variant="subtitle2" style={{ paddingBottom: "8px" }}>
							Banning a player means you'll never play with them again.
						</Typography>
						{this.state.gameStates
							? this.props.game.Properties.Members.map((member) => {
									return (
										<React.Fragment key={member.Nation + "-fragment"}>
											<div
												style={{
													display: "flex",
													width: "100%",
													flexWrap: "wrap",
													marginBottom: "12px",
												}}
											>
												<div
													style={{
														width: "40px",
														height: "40px",
														marginRight: "8px",
													}}
												>
													<UserAvatar
														onNewGameState={this.props.onNewGameState}
														game={this.props.game}
														gameState={
															this.member
																? this.state.gameStates[this.member.Nation]
																: null
														}
														banChange={(_) => {
															this.forceUpdate();
														}}
														user={member.User}
													/>
												</div>

												<div
													style={{
														display: "flex",
														flexDirection: "column",
													}}
												>
													<Typography variant="body1">
														{member.Nation}
													</Typography>
													<Typography variant="subtitle2">
														{member.User.Name}
													</Typography>
												</div>

												<div
													style={{
														marginLeft: "auto",
														display: "flex",
														paddingLeft: "8px",
													}}
												>
													<FormControlLabel
														control={
															<Checkbox
																disabled={
																	!member.User.Id ||
																	member.User.Id === Globals.user.Id
																}
																checked={!!this.state.bans[member.User.Id]}
																onChange={this.toggleBanned(member.User.Id)}
																color="primary"
															/>
														}
														label="Ban"
													/>

													<FormControlLabel
														control={
															<Checkbox
																disabled={
																	!this.member ||
																	member.Nation === this.member.Nation
																}
																checked={
																	this.member &&
																	(
																		this.state.gameStates[this.member.Nation]
																			.Properties.Muted || []
																	).indexOf(member.Nation) !== -1
																}
																onChange={this.toggleMuted(member.Nation)}
																color="primary"
															/>
														}
														label="Mute"
														style={{
															marginRigh: "0px",
														}}
													/>
												</div>
											</div>
										</React.Fragment>
									);
							  })
							: ""}

						<DialogActions className={classes.dialogActions}>
							<Button onClick={this.close} color="primary">
								Close
							</Button>
						</DialogActions>
					</DialogContent>
				</Dialog>
			);
		} else {
			return "";
		}
	}

render() {
		const { classes } = this.props;
		if (!this.state.open) {
			return "";
		}
		return (
			<Dialog
				onEntered={helpers.genOnback(this.close)}
				open={this.state.open}
				disableBackdropClick={false}
				classes={{
					paper: classes.paper,
				}}
				onClose={this.close}
			>
				<DialogTitle>Game result</DialogTitle>
				<DialogContent style={{ paddingBottom: "0px" }}>
					{this.state.gameResult ? (
						this.state.gameResult.Properties.SoloWinnerMember ? (
							<Typography>
								The game was won by{" "}
								{
									(
										this.props.game.Properties.Members || []
									).find((m) => {
										return (
											m.Nation ===
											this.state.gameResult.Properties
												.SoloWinnerMember
										);
									}).User.Name
								}{" "}
								playing{" "}
								{
									this.state.gameResult.Properties
										.SoloWinnerMember
								}
								.
							</Typography>
						) : (
							<Typography>
								The game was a draw.
								{this.state.gameResult.Properties.Scores[0]
									.Score >
								this.state.gameResult.Properties.Scores[1].Score
									? " " +
									  (
											this.props.game.Properties
												.Members || []
									  ).find((m) => {
											return (
												m.Nation ===
												this.state.gameResult.Properties
													.Scores[0].Member
											);
									  }).User.Name +
									  " earned the highest score as " +
									  this.state.gameResult.Properties.Scores[0]
											.Member +
									  "."
									: ""}
							</Typography>
						)
					) : (
						""
					)}

					<Typography variant="caption">
						Points below are based on the{" "}
						<a
							href="http://windycityweasels.org/tribute-scoring-system/"
							target="_blank"
							rel="noreferrer"
						>
							Tribute
						</a>{" "}
						system.
					</Typography>
					<List>
						{this.state.gameResult
							? this.state.gameResult.Properties.Scores.map(
									(score) => {
										const trueSkill = this.state.trueSkills
											? this.state.trueSkills.Properties.find(
													(l) => {
														return (
															l.Properties
																.Member ===
															score.Member
														);
													}
											  )
											: null;
										return (
											<ListItem
												key={"nation_" + score.Member}
												style={{
													padding: "0px",
													margin: "0px",
												}}
											>
												<Accordion
													square
													style={{
														padding: "0px",
														margin: "0px",
														boxShadow: "none",
														width: "100%",
													}}
												>
													<AccordionSummary
														style={{
															padding: "0px",
															margin: "0px",
															boxShadow: "none",
														}}
														expandIcon={
															<ExpandIcon />
														}
													>
														<div
															style={{
																backgroundColor:
																	"white",
																padding:
																	"0px 0px",
																margin: "0px",
																display: "flex",
																flexWrap:
																	"wrap",
																alignItems:
																	"center",
																width: "100%",
																color: "rgba(40, 26, 26, 0.54)",
															}}
														>
															<NationAvatar
																game={
																	this.props
																		.game
																}
																gameState={
																	this.props
																		.gameState
																}
																newGameState={
																	this.props
																		.newGameState
																}
																nation={
																	score.Member
																}
																variant={
																	this.props
																		.variant
																}
															/>
															<div
																style={{
																	marginLeft:
																		"8px",
																	display:
																		"flex",
																	flexDirection:
																		"column",
																}}
															>
																<Typography
																	variant="subtitle2"
																	color="primary"
																>
																	{
																		score.Member
																	}
																</Typography>
																{this.state
																	.gameResult
																	.Properties
																	.SoloWinnerMember ===
																score.Member ? (
																	<Typography
																		variant="caption"
																		key="solo-winner"
																	>
																		Solo
																		winner
																	</Typography>
																) : (
																	""
																)}
																{this.state
																	.gameResult
																	.Properties
																	.SoloWinnerMember ===
																	"" &&
																(
																	this.state
																		.gameResult
																		.Properties
																		.EliminatedMembers ||
																	[]
																).indexOf(
																	score.Member
																) === -1 &&
																(
																	this.state
																		.gameResult
																		.Properties
																		.NMRMembers ||
																	[]
																).indexOf(
																	score.Member
																) === -1 ? (
																	<Typography
																		variant="caption"
																		key="dias-member"
																	>
																		Draw
																		participant
																	</Typography>
																) : (
																	""
																)}
																{(
																	this.state
																		.gameResult
																		.Properties
																		.EliminatedMembers ||
																	[]
																).indexOf(
																	score.Member
																) !== -1 ? (
																	<Typography
																		variant="caption"
																		key="eliminated-member"
																	>
																		Eliminated
																	</Typography>
																) : (
																	""
																)}
																{(
																	this.state
																		.gameResult
																		.Properties
																		.NMRMembers ||
																	[]
																).indexOf(
																	score.Member
																) !== -1 ? (
																	<Typography
																		variant="caption"
																		key="nmr-member"
																	>
																		Abandoned
																		the game
																	</Typography>
																) : (
																	""
																)}
															</div>
															<div
																style={{
																	display:
																		"flex",
																	flexDirection:
																		"column",
																	alignSelf:
																		"flex-end",
																	marginLeft:
																		"auto",
																}}
															>
																<Typography
																	variant="subtitle2"
																	color="primary"
																	style={{
																		textAlign:
																			"right",
																	}}
																>
																	{helpers.twoDecimals(
																		score.Score
																	)}{" "}
																	points
																</Typography>
																<Typography
																	variant="caption"
																	style={{
																		textAlign:
																			"right",
																	}}
																>
																	{score.SCs}{" "}
																	SCs{" "}
																</Typography>
															</div>
														</div>
													</AccordionSummary>

													<AccordionDetails>
														<div
															style={{
																width: "100%",
															}}
														>
															{score ? (
																<div
																	style={{
																		display:
																			"flex",
																		flexDirection:
																			"column",
																		padding:
																			"0px",
																		margin: "0px",
																		width: "100%",
																	}}
																>
																	<div>
																		{score.Explanation.split(
																			"\n"
																		)
																			.filter(
																				(
																					l
																				) => {
																					return (
																						l.trim() !==
																						""
																					);
																				}
																			)
																			.map(
																				(
																					line
																				) => {
																					const parts =
																						line.split(
																							":"
																						);
																					return (
																						<div
																							style={{
																								display:
																									"flex",
																								justifyContent:
																									"space-between",
																								color: "rgba(40, 26, 26,0.3)",
																							}}
																							key={
																								line
																							}
																						>
																							<Typography variant="subtitle2">
																								{
																									parts[0]
																								}
																							</Typography>
																							<Typography variant="subtitle2">
																								{helpers.twoDecimals(
																									parts[1]
																								)}
																							</Typography>
																						</div>
																					);
																				}
																			)}

																		{trueSkill ? (
																			<div>
																				<div
																					style={{
																						borderTop:
																							"1px solid black",
																						display:
																							"flex",
																						justifyContent:
																							"space-between",
																						padding:
																							"0px",
																						margin: "0px 0px 16px 0px",
																						width: "100%",
																					}}
																				>
																					<Typography variant="subtitle2">
																						Total
																						points
																					</Typography>
																					<Typography variant="subtitle2">
																						{helpers.twoDecimals(
																							score.Score
																						)}
																					</Typography>
																				</div>
																				<div
																					style={{
																						display:
																							"flex",
																						justifyContent:
																							"space-between",
																						padding:
																							"0px",
																						margin: "0px",
																						width: "100%",
																						color: "rgba(40, 26, 26,0.3)",
																					}}
																				>
																					{trueSkill
																						.Properties
																						.Previous instanceof
																					Array ? (
																						<React.Fragment>
																							<Typography variant="subtitle2">
																								Previous
																								rating
																							</Typography>
																							<Typography variant="subtitle2">
																								{helpers.twoDecimals(
																									trueSkill
																										.Properties
																										.Previous[0]
																										.Rating
																								)}
																							</Typography>
																						</React.Fragment>
																					) : (
																						""
																					)}
																				</div>
																				<div
																					style={{
																						display:
																							"flex",
																						justifyContent:
																							"space-between",
																						padding:
																							"0px",
																						margin: "0px",
																						width: "100%",
																						color: "rgba(40, 26, 26,0.3)",
																					}}
																				>
																					{trueSkill
																						.Properties
																						.Previous instanceof
																					Array ? (
																						<React.Fragment>
																							<Typography variant="subtitle2">
																								Points
																								vs
																								Predicted
																								outcome
																							</Typography>
																							<Typography variant="subtitle2">
																								{helpers.twoDecimals(
																									trueSkill
																										.Properties
																										.Rating -
																										trueSkill
																											.Properties
																											.Previous[0]
																											.Rating
																								)}
																							</Typography>
																						</React.Fragment>
																					) : (
																						""
																					)}
																				</div>
																				<div
																					style={{
																						display:
																							"flex",
																						justifyContent:
																							"space-between",
																						padding:
																							"0px",
																						margin: "0px",
																						width: "100%",
																						borderTop:
																							"1px solid black",
																					}}
																				>
																					<Typography variant="subtitle2">
																						New
																						rating
																					</Typography>
																					<Typography variant="subtitle2">
																						{helpers.twoDecimals(
																							trueSkill
																								.Properties
																								.Rating
																						)}
																					</Typography>
																				</div>
																			</div>
																		) : (
																			<div
																				style={{
																					display:
																						"flex",
																					justifyContent:
																						"space-between",
																					padding:
																						"0px",
																					margin: "0px",
																					width: "100%",
																				}}
																			>
																				<div>
																					Total
																					points
																				</div>
																				<div>
																					{helpers.twoDecimals(
																						score.Score
																					)}
																				</div>
																			</div>
																		)}
																	</div>
																</div>
															) : (
																""
															)}
														</div>
													</AccordionDetails>
												</Accordion>
											</ListItem>
										);
									}
							  )
							: ""}
					</List>
					<DialogActions className={classes.dialogActions}>
						<Button onClick={this.close} color="primary">
							Close
						</Button>
					</DialogActions>
				</DialogContent>
			</Dialog>
		);
	}