import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import { Grid, Typography } from "@mui/material";
import PropTypes from "prop-types";
import React from "react";
import { SelectPickerCard } from "../../Common";
import {
  HeaderContainer,
  QuadrantTextContainer,
  SelectPickerContainer,
  StyledBackButton,
  Wrapper,
} from "./styles";

const ScatterPlotWrapper = ({
  valueGroupSectors,
  valueGroupTimeframes,
  optionGroupSectors,
  optionGroupTimeframes,
  onChangeSectors,
  onChangeTimeframes,
  onClickBackBtn,
  ...others
}) => {
  const renderBackButton = () => (
    <StyledBackButton
      variant="text"
      width="fit-content"
      height="fit-content"
      disableRipple
      disableFocusRipple
      onClick={onClickBackBtn}
    >
      <ArrowBackIosIcon color="red" />
    </StyledBackButton>
  );

  const renderSelectPickers = () => (
    <>
      <SelectPickerContainer>
        <SelectPickerCard
          valueGroups={valueGroupSectors}
          optionGroups={optionGroupSectors}
          onChange={onChangeSectors}
          textColor={"#FFFFFF"}
          selectPickerItemHeight={30}
          selectPickerHeight={100}
          height={"fit-content"}
          width={"250px"}
          title={"Sectors"}
        />
        <SelectPickerCard
          valueGroups={valueGroupTimeframes}
          optionGroups={optionGroupTimeframes}
          onChange={onChangeTimeframes}
          textColor={"#FFFFFF"}
          selectPickerItemHeight={30}
          selectPickerHeight={100}
          height={"fit-content"}
          width={"250px"}
          title={"Timeframes"}
        />
      </SelectPickerContainer>
    </>
  );

  return (
    <Wrapper {...others}>
      <HeaderContainer>
        {renderBackButton()}
        {renderSelectPickers()}
      </HeaderContainer>
      <Grid container rowSpacing={12} marginTop="auto">
        <Grid item xs={3}>
          <QuadrantTextContainer>
            <Typography variant="h2" fontWeight="bold">
              2nd
            </Typography>
            <Typography variant="caption" fontWeight="bold">
              Quadrant
            </Typography>
            <Typography variant="caption">
              Lorem ipsum dolor amet, consectetur adipiscing elit, sed do
              eiusmod{" "}
            </Typography>
          </QuadrantTextContainer>
        </Grid>
        <Grid item xs={6} />
        <Grid item xs={3}>
          <QuadrantTextContainer>
            <Typography variant="h2" fontWeight="bold">
              1st
            </Typography>
            <Typography variant="caption" fontWeight="bold">
              Quadrant
            </Typography>
            <Typography variant="caption">
              Lorem ipsum dolor amet, consectetur adipiscing elit, sed do
              eiusmod{" "}
            </Typography>
          </QuadrantTextContainer>
        </Grid>
        <Grid item xs={3}>
          <QuadrantTextContainer>
            <Typography variant="h2" fontWeight="bold">
              4th
            </Typography>
            <Typography variant="caption" fontWeight="bold">
              Quadrant
            </Typography>
            <Typography variant="caption">
              Lorem ipsum dolor amet, consectetur adipiscing elit, sed do
              eiusmod{" "}
            </Typography>
          </QuadrantTextContainer>
        </Grid>
        <Grid item xs={6} />
        <Grid item xs={3}>
          <QuadrantTextContainer>
            <Typography variant="h2" fontWeight="bold">
              3rd
            </Typography>
            <Typography variant="caption" fontWeight="bold">
              Quadrant
            </Typography>
            <Typography variant="caption">
              Lorem ipsum dolor amet, consectetur adipiscing elit, sed do
              eiusmod{" "}
            </Typography>
          </QuadrantTextContainer>
        </Grid>
      </Grid>
    </Wrapper>
  );
};

ScatterPlotWrapper.propTypes = {
  valueGroupSectors: PropTypes.object.isRequired,
  valueGroupTimeframes: PropTypes.object.isRequired,
  optionGroupSectors: PropTypes.object.isRequired,
  optionGroupTimeframes: PropTypes.object.isRequired,
  onChangeSectors: PropTypes.func.isRequired,
  onChangeTimeframes: PropTypes.func.isRequired,
  onClickBackBtn: PropTypes.func,
};

export default ScatterPlotWrapper;