import Grid from "@material-ui/core/Grid";
import { PureComponent } from "react";
// eslint-disable-next-line no-unused-vars
import { connect, ConnectedProps } from "react-redux";

// eslint-disable-next-line no-unused-vars
import { RootState } from "../../../redux/reducers";
import { InformationPanel } from "../../common";
import { CommuneSearch } from "./commune-search";
import { CommuneStrateDetails } from "./commune-strate-details";
import { CommuneSummary } from "./commune-summary";
import { CommuneType } from "./commune-type";
import styles from "./Results.module.scss";

const INFORMATION_PANEL_NAME = "dotations";

const mapStateToProps = ({ descriptions, display }: RootState) => ({
  communesTypes: descriptions.dotations.communesTypes,
  isInformationPanelVisible: display.currentInformationPanels.includes(
    INFORMATION_PANEL_NAME
  ),
});

const connector = connect(mapStateToProps);

type PropsFromRedux = ConnectedProps<typeof connector>;

type Props = PropsFromRedux & {};

class Results extends PureComponent<Props> {
  render() {
    const { communesTypes, isInformationPanelVisible } = this.props;
    return (
      <div className={styles.container}>
        {isInformationPanelVisible && (
          <Grid container spacing={3}>
            <Grid item lg={12} xl={8}>
              <InformationPanel
                name={INFORMATION_PANEL_NAME}
                title="Les montants des dotations calculées ci-dessous sont des estimations."
              >
                ⚠️ Les dotations présentées par cette application s’appuient sur
                les données du PLF 2022.
                <br /> Elles peuvent donc différer des montants effectivement
                perçus. <b>Seuls les montants calculés par la DGCL font foi.</b>
                <br />
                Vous êtes intéressé(e) par les dotations 2023 ? Faites-le nous
                savoir en <a href="XXX">complétant ce formulaire</a>.
              </InformationPanel>
            </Grid>
          </Grid>
        )}
        <Grid container spacing={3}>
          <Grid item lg={12} xl={8}>
            <CommuneStrateDetails />
          </Grid>
          <Grid item lg={8} md={12} sm={12} xl={4} xs={12}>
            <CommuneSummary />
          </Grid>
          <Grid item lg={4} md={6} sm={6} xl={3} xs={12}>
            <CommuneSearch />
          </Grid>
          {/* </Grid>
        <Grid container spacing={3}> */}
          {communesTypes.map((communeType, index) => (
            <Grid
              key={communeType.code}
              item
              lg={4}
              md={6}
              sm={6}
              xl={3}
              xs={12}
            >
              <CommuneType
                code={communeType.code}
                departement={communeType.departement}
                habitants={communeType.habitants}
                index={index}
                name={communeType.name}
                potentielFinancierParHab={communeType.potentielFinancierParHab}
              />
            </Grid>
          ))}
        </Grid>
      </div>
    );
  }
}

const ConnectedResults = connector(Results);

export { ConnectedResults as Results };