@material-ui/core#Tabs JavaScript Examples

function Admin() {
  const [tab, setTab] = React.useState(0);
  const [artists, setArtists] = useState([]);

  useEffect(() => {
    const unsubscribe = getArtists((snapshot) => {
      setArtists(snapshot.docs.map((doc) => doc.data().name));
    });
    return unsubscribe;
  }, []);

  return (
    <div className="admin">
      <div className="admin__wrapper">
        <Paper square>
          <Tabs
            value={tab}
            onChange={(e, newValue) => setTab(newValue)}
            indicatorColor="secondary"
            textColor="secondary"
            centered
          >
            <Tab label="Add Song" />
            <Tab label="Add Artist" />
          </Tabs>
        </Paper>

        {tab === 0 ? (
          <SongForm artists={artists} />
        ) : tab === 1 ? (
          <ArtistForm artists={artists} />
        ) : (
          <div></div>
        )}
      </div>
    </div>
  );
}

export default function Informing() {
  const [tab, setTab] = useState('training');

  return (
    <div className="contentWrapper">
      <div className={styles.content}>
        <Tabs
          value={tab}
          onChange={(e, newTab) => setTab(newTab)}
          variant="fullWidth"
        >
          <Tab value="training" label="آموزش" />
          <Tab value="news" label="اخبار" />
          <Tab value="questions" label="سوالات" />
        </Tabs>
        {tab === 'training' && <Trainings />}
        {tab === 'news' && <News />}
        {tab === 'questions' && <Questions />}
      </div>
    </div>
  );
}

StyledTabs = withStyles({
  indicator: {
    display: 'flex',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    '& > div': {
      maxWidth: 40,
      width: '100%',
      backgroundColor: '#DC6BE5',
    },
  },
})(props => <Tabs {...props} TabIndicatorProps={{ children: <div /> }} />)

export default function FoodboxFlow() {
  const classes = useStyles();
  const [state, dispatch] = useReducer(reducer, initialState);

  const ActiveComponent = stepComponents[state.step];

  return (
    <div className={classes.root}>
      <Paper className={classes.tabMargin} elevation={3} square>
        <Tabs value={state.step} indicatorColor="primary" textColor="primary" centered>
          {tabNames.map((tab, idx) => (
            <CustomTab icon={<H4>{idx + 1}</H4>} key={tab} label={tab} disableRipple />
          ))}
        </Tabs>
      </Paper>
      <div className={classes.content}>
        <ActiveComponent state={state} dispatch={dispatch} />
      </div>
      <ErrorSnackbar
        open={state.error !== null}
        handleClose={() => dispatch({ type: "ERROR", payload: null })}
        errorMessage={state.error}
        autoHideDuration={null}
      />
    </div>
  );
}

render() {
        return (
            <div className="stock-details-inner-wrapper">
                <AppBar position="static" color="default">
                    <Tabs
                        variant="scrollable"
                        value={this.state.tabIndex}
                        onChange={this.handleTabChange}
                        TabIndicatorProps={{ style: { background: '#6200EE' } }}
                    >
                        <Tab label="Chart"  icon={<TimelineIcon />} {...a11yProps(0)} />
                        <Tab label="Basic Info" disabled={!!!this.state.ticker} icon={<InfoOutlinedIcon />}{...a11yProps(1)} />
                        <Tab label="News" disabled={!!!this.state.ticker} icon={<CommentOutlinedIcon />}{...a11yProps(2)} />
                    </Tabs>
                </AppBar>

                <TabPanel value={this.state.tabIndex} index={0}>
                    <StockFigure />
                </TabPanel>
                <TabPanel value={this.state.tabIndex} index={1}>
                    <BasicInfo />
                </TabPanel>
                <TabPanel value={this.state.tabIndex} index={2}>
                    <CompanyNews />
                </TabPanel>
            </div>
        );
    }

LanguageTabs = withStyles({
  root: {
    borderBottom: 'none',
    minHeight: 24
  },
  indicator: {
    backgroundColor: 'transparent'
  }
})(Tabs)

export default function SettingsDialog({open, onClose}) {
    const classes = useStyles();
    const [selectedTab, setSelectedTab] = useState(0);

    const handleChange = (_, newValue) => {
        setSelectedTab(newValue);
    };

    return (
        <Dialog open={open} onClose={onClose} classes={{paper: classes.paper}}>
            <Tabs value={selectedTab} onChange={handleChange}>
                <Tab label="Credentials"/>
                <Tab label="Devices"/>
                <Tab label="Settings"/>
            </Tabs>
            <CredentialsOptions className={classes.container} hidden={selectedTab !== 0}/>
            <DeviceSelector className={classes.container} hidden={selectedTab !== 1}/>
            <ConnectionOptions className={classes.container} hidden={selectedTab !== 2}/>
            <DialogActions>
                <Button className={classes.button} onClick={onClose}>
                    Done
                </Button>
            </DialogActions>
        </Dialog>
    );
}

StyledTabs = withStyles({
  root: {
    width: '100%',
    backgroundColor:'#f4f4f4',
  },
  indicator: {
    display: 'none',
  },
  centered: {
    alignItems: 'center',
    justify: 'flex-end',
  },
  flexContainer: {
    justifyContent:'flex-end',
  },
})((props) => <Tabs {...props} TabIndicatorProps={{ children: <span /> }} />)

AntTabs = withStyles({
  indicator: {
    backgroundColor: "black",
  },
})(Tabs)

export default function TabsComponent() {
  const classes = useStyles();
  const match = useRouteMatch();
  const history = useHistory();
  const location = useLocation();
  const { path: rootPath } = match;

  const handleChange = (event, newValue) => {
    history.push(newValue);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={location.pathname} onChange={handleChange}>
          <Tab label="Foo" value={`${rootPath}/foo`} />
          <Tab label="Bar" value={`${rootPath}/bar`} />
        </Tabs>
      </AppBar>
      <Switch>
        <Route path={rootPath} exact={true}>
          <Redirect to={`${rootPath}/foo`} />
        </Route>
        <Route path={`${rootPath}/foo`}>
          <Typography component="div">
            <Box p={3}>Foo Content</Box>
          </Typography>
        </Route>
        <Route path={`${rootPath}/bar`}>
          <Typography component="div">
            <Box p={3}>
              Bar Content
              <React.Suspense fallback={null}>
                <Button>Bar Button</Button>
              </React.Suspense>
            </Box>
          </Typography>
        </Route>
      </Switch>
    </div>
  );
}

export default function TabsComponent() {
  const classes = useStyles();
  const match = useRouteMatch();
  const history = useHistory();
  const location = useLocation();
  const { path: rootPath } = match;

  const handleChange = (event, newValue) => {
    history.push(newValue);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={location.pathname} onChange={handleChange}>
          <Tab label="Foo" value={`${rootPath}/foo`} />
          <Tab label="Bar" value={`${rootPath}/bar`} />
        </Tabs>
      </AppBar>
      <Switch>
        <Route path={rootPath} exact={true}>
          <Redirect to={`${rootPath}/foo`} />
        </Route>
        <Route path={`${rootPath}/foo`}>
          <Typography component="div">
            <Box p={3}>Foo Content</Box>
          </Typography>
        </Route>
        <Route path={`${rootPath}/bar`}>
          <Typography component="div">
            <Box p={3}>
              Bar Content
              <React.Suspense fallback={null}>
                <Button>Bar Button</Button>
              </React.Suspense>
            </Box>
          </Typography>
        </Route>
      </Switch>
    </div>
  );
}

MaterialTabs = (props) => {
    const [selectedTab, setSelectedTab] = useState(0);

    const handleChange = (event, newValue) => {
        setSelectedTab(newValue);
    };

    const tabStyle = {
        root: props.classes.tabRoot,
        selected: props.classes.tabSelected,
    };

    const { indicator, centered, tab } = props.classes;
    return (
        <>
            <TabsContainer>
                <Tabs
                    classes={{
                        indicator: indicator,
                        centered: centered,
                    }}
                    value={selectedTab}
                    onChange={handleChange}
                    textColor='primary'
                    centered>
                    <Tab label='Stats' className={tab} classes={tabStyle} />
                    <Tab label='Timeline' className={tab} classes={tabStyle} />
                    <Tab
                        label='Activities'
                        className={tab}
                        classes={tabStyle}
                    />
                </Tabs>
            </TabsContainer>
            {selectedTab === 0 && props.tab1}
            {selectedTab === 1 && props.tab2}
            {selectedTab === 2 && props.tab3}
        </>
    );
}

ViewJob = props => {
  const classes = useStyles();
  const showLoader = useLoader();
  const { match } = props;
  const { applicationId } = match.params;
  const [basicDetail, setBasicDetail] = useState({});
  const [tab, setTab] = useState(0);
  const [loading, setLoading] = useState(false);

  const loadData = () => {
    showLoader(true);
    setLoading(true);
    APIService.getApplicationDetails(applicationId)
      .then(resp => {
        showLoader(false);
        setBasicDetail({ applicationId, ...resp.data });
        setLoading(false);
      }).catch(console.log);
  };

  const handleTabChange = (event, newValue) => {
    setTab(newValue);
  };

  useEffect(() => {
    if (!loading && basicDetail.title === undefined) {
      loadData();
    }
  });

  const Body = () => (
    <div>
      <Tabs
        value={tab}
        indicatorColor="primary"
        textColor="primary"
        onChange={handleTabChange}
        aria-label="View job tabs"
      >
        <Tab label="Details" />
        <Tab label="Notes" />
      </Tabs>
      <TabPanel value={tab} index={0}>
        <div className={classes.root}>
          <BasicDetails basicDetail={basicDetail} reload={loadData} />
          <TimeLog basicDetail={basicDetail} reload={loadData} />
        </div>
      </TabPanel>
      <TabPanel value={tab} index={1}>
        <Notes notes={basicDetail.notes} applicationId={applicationId} reload={loadData} />
      </TabPanel>
    </div>
  );

  return (
    <div className={classes.root}>
      <NavBar>
        <Typography variant="h6">
          <NavLink to="/dashboard" className={classes.underLine}>Back</NavLink>
        </Typography>
        {basicDetail.title ? <Body /> : '' }
      </NavBar>
    </div>
  );
}

TabsStyles = styled(Tabs)`
  margin: 0.5rem;
`

render() {
    //console.log("Rendering App");
    const { classes } = this.props;
    return (
      <>
        <ThemeProvider theme={this.theme}>
          <CssBaseline />
          <WebSocketHelper
            ws_url={this.state.ws_url}
            messageProcess={this.messageProcess}
            ref={this.wshelper}
            status={status => this.ws_status = status}
          />
          <AppBar position="sticky" color="default">
            <Toolbar>
              <Tabs
                className={classes.mainTabs}
                value={this.state.selectedTab}
                onChange={(event, newValue) => this.setState({ selectedTab: newValue })}
                indicatorColor="secondary"
                textColor="inherit"
                variant="scrollable"
                scrollButtons="auto"
                aria-label="Plugins tabs"
              >
                <Tab label="Dashboard" disabled {...this.a11yProps(0)} />
                <Tab label="Graphs" {...this.a11yProps(1)} />
                <Tab label="Joystick" {...this.a11yProps(2)} />
                <Tab label="OP Edit" {...this.a11yProps(3)} />
                <Tab label="CAN BUS" disabled {...this.a11yProps(4)} />
              </Tabs>

              {this.connectionStatus()}
              <IconButton onClick={() => { this.setState({ show_mainsettings: true }) }} aria-label="WebSocket connection status" component="span" color="inherit">
                <SettingsIcon />
              </IconButton>
            </Toolbar>
          </AppBar>

          <TabPanel value={this.state.selectedTab} index={0}>
            Dashboard will be here
          </TabPanel>
          <TabPanel value={this.state.selectedTab} index={1}>
            <GraphDashboard ref={this.pushgraphdata} active={this.state.selectedTab === 1} />
          </TabPanel>
          <TabPanel value={this.state.selectedTab} index={2}>
            <Joystick procData={data => this.sendWSmsg(data)} active={this.state.selectedTab === 2} />
          </TabPanel>
          <TabPanel value={this.state.selectedTab} index={3}>
            <OPEdit ref={this.pushopedit} procData={data => this.sendWSmsg(data)} active={this.state.selectedTab === 3} />
          </TabPanel>
          <TabPanel value={this.state.selectedTab} index={4}>
            CAN messages will be here
          </TabPanel>
          {this.state.show_mainsettings ? (
            <MainSettings
              setSettings={(ws_url, rate, dark_theme) => { this.setState({ show_mainsettings: false, ws_url: ws_url, rateHz: rate }); this.setTheme(dark_theme) }}
              show={this.state.show_mainsettings}
              ws_url={this.state.ws_url}
              rateHz={this.state.rateHz}
              dark_theme={this.state.dark_theme}
            />
          ) : (null)}
          <Snackbar
            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
            open={this.show_error}
            autoHideDuration={5000}
            onClose={() => this.show_error = false}
          >
            <MuiAlert elevation={6} variant="filled" severity="error">{this.last_error_msg}</MuiAlert>
          </Snackbar>
        </ThemeProvider>
      </>
    );
  }

UsersPage = () => {
  const common = useCommonStyles();

  const { openSuccessSnackbar } = useSuccessSnackbar();
  const { list, filter, sort, currentPage, rowsPerPage, isNewAdminCreated } =
    useSelector(selectUsersAndTable);
  const dispatch = useDispatch();

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

  const userDeleteHandler = (id) => {
    const removeUser = () => {
      dispatch(closeDialog());
      dispatch(deleteUser(id));
    };
    openSuccessSnackbar(removeUser, REMOVE_USER_MESSAGE);
  };

  const { tab, handleTabChange } = useUsersTabs();

  const userTabs = userTabNames.map((name) => <Tab key={name} label={name} />);

  return (
    <div className={common.container}>
      <div className={common.adminHeader}>
        <Typography variant='h1' className={common.materialTitle}>
          {config.titles.usersPageTitles.mainPageTitle}
        </Typography>
      </div>
      <AppBar position='static' color='primary'>
        <Tabs
          value={tab}
          className={common.tabs}
          onChange={(_, nextTab) => handleTabChange(nextTab)}
          variant='fullWidth'
        >
          {userTabs}
        </Tabs>
      </AppBar>
      <TabPanel value={tab} index={0}>
        <UserTab list={list} onDelete={userDeleteHandler} />
      </TabPanel>
      <TabPanel value={tab} index={1}>
        <AdminTab list={list} onDelete={userDeleteHandler} />
      </TabPanel>
    </div>
  );
}

StyledTabs = withStyles({
  root: {},
  indicator: {
    backgroundColor: "#006000"
  }
})(Tabs)

render() {
    const { tabs, title, mobile } = this.props;
    const { value } = this.state;

    const TabsList = () => (
      <Tabs
        value={value}
        indicatorColor="secondary"
        onChange={this.handleChange}
        centered={!mobile}
        variant={mobile ? 'scrollable' : 'standard'}
      >
        {tabs.map((tab, index) => (
          <Tab label={tab.label} key={index} />
        ))}
      </Tabs>
    );

    let content;
    if (tabs[value]) {
      content = !Array.isArray(tabs[value].content)
        ? tabs[value].content
        : tabs[value].content.map((node, i) => {
          if (typeof node === 'object') {
            return <KeyComponent key={`${title}-${tabs[value].label}-${i}`}>{node}</KeyComponent>;
          }
          return <Typography key={`${title}-${tabs[value].label}-${i}`}>{node}</Typography>;
        });
    }

    if (title) {
      return (
        <>
          <AppBar position="static">
            <Toolbar variant="dense">
              <Typography className="title-text">{title}</Typography>
              <TabsList />
            </Toolbar>
          </AppBar>
          <div className="body-container">
            {content}
          </div>
        </>
      );
    }

    return (
      <>
        <Paper style={{ marginBottom: 8 }}>
          <TabsList />
        </Paper>
        {content}
      </>
    );
  }

function Schedule({ schedule }) {
  const [tab, setTab] = useState(new Date().getDay());

  const useStyles = makeStyles((theme) => ({
    root: {
      backgroundColor: theme.palette.background.paper,
    },
  }));

  const handleChange = (e, val) => {
    setTab(val);
  };

  const TabPanel = (props) => {
    const { children, value, index } = props;
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`vertical-tabpanel-${index}`}
        aria-labelledby={`vertical-tab-${index}`}
        style={{ padding: "10px" }}
      >
        {value === index && <h1>{children}</h1>}
      </div>
    );
  };

  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Tabs
        value={tab}
        onChange={handleChange}
        variant="scrollable"
        scrollButtons="auto"
      >
        <Tab label="Sunday" />
        <Tab label="Monday" />
        <Tab label="Tuesday" />
        <Tab label="Wednesday" />
        <Tab label="Thrusday" />
        <Tab label="Friday" />
        <Tab label="Saturday" />
      </Tabs>
      {Object.keys(schedule).length !== 0 ? (
        <>
          <TabPanel value={tab} index={0}>
            <ScheduleCard Anime={schedule.sunday} />
          </TabPanel>
          <TabPanel value={tab} index={1}>
            <ScheduleCard Anime={schedule.monday} />
          </TabPanel>
          <TabPanel value={tab} index={2}>
            <ScheduleCard Anime={schedule.tuesday} />
          </TabPanel>
          <TabPanel value={tab} index={3}>
            <ScheduleCard Anime={schedule.wednesday} />
          </TabPanel>
          <TabPanel value={tab} index={4}>
            <ScheduleCard Anime={schedule.thursday} />
          </TabPanel>
          <TabPanel value={tab} index={5}>
            <ScheduleCard Anime={schedule.friday} />
          </TabPanel>
          <TabPanel value={tab} index={6}>
            <ScheduleCard Anime={schedule.saturday} />
          </TabPanel>
        </>
      ) : (
        ""
      )}
    </div>
  );
}

Discussion = (props) => {
  const classes = useStyles();

  const sources = [{
    'label': 'Disqus comments',
    'content':
        <Disqus.DiscussionEmbed
            shortname={"covid19direct-world"}
            config={disqusConfig}
        />
  }, {
    'label': 'Facebook',
    'content':
      <FacebookProvider appId="201788627783795">
        <FacebookComments href="https://covid-19.direct/" />
      </FacebookProvider>,
  }];

  const [source, setSource] = React.useState(0);
  const change = (e, to) => {
    setSource(to);
  };

  return (
    <Paper className={props.className}>
      <Tabs value={source} onChange={change}>
        {sources.map(({label}, i) =>
          <Tab key={label} label={label} value={i} />
        )}
      </Tabs>

      <div className={classes.scrollPane}>
        {sources.map(({label, content}, i) =>
          <div key={label} className={source !== i ? classes.hide : ''}>
            {content}
          </div>
        )}
      </div>
    </Paper>
  );
}

WriterServices = (props) => {
  const [value, setValue] = React.useState(0);
  const classes = useStyles();

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  function TabPanel(props) {
    const { children, value, index, ...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`vertical-tabpanel-${index}`}
        aria-labelledby={`vertical-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box p={3}>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
  }
  
  TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
  };
  
  function a11yProps(index) {
    return {
      id: `vertical-tab-${index}`,
      "aria-controls": `vertical-tabpanel-${index}`,
    };
  }

  return (

    <div className={classes.userServices}>
            <h3 className={classes.userEducation}>Services Offered:</h3>
            <Paper>
              <Tabs
                orientation="vertical"
                variant="scrollable"
                value={value}
                onChange={handleChange}
                aria-label="Vertical tabs example"
                className={classes.tabs}
              >
                <Tab label="Grant Writing" {...a11yProps(0)} />
                <Tab label="Grant Research" {...a11yProps(1)} />
              </Tabs>
              <TabPanel value={value} index={0}>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
                blanditiis tenetur unde suscipit, quam beatae rerum inventore
                consectetur, neque doloribus, cupiditate numquam dignissimos
                laborum fugiat deleniti? Eum quasi quidem quibusdam.
              </TabPanel>
              <TabPanel value={value} index={1}>
                This is just here to show you this works.
              </TabPanel>
            </Paper>
          </div>
  );
}

export function TemplateDetails() {
  const [activeTab, setActiveTab] = useState("README");
  const { templateId } = useParams();
  const { getTemplateById } = useTemplates();
  const history = useHistory();
  const classes = useStyles();
  const template = getTemplateById(templateId);

  function handleBackClick() {
    history.goBack();
  }

  function handleOpenGithub() {
    window.electron.openUrl(template.githubUrl);
  }

  return (
    <div className={classes.root}>
      <Helmet title="Deployment Detail" />

      <div className={classes.titleContainer}>
        <Box display="flex" alignItems="center">
          <IconButton aria-label="back" onClick={handleBackClick}>
            <ChevronLeftIcon />
          </IconButton>
          <Typography variant="h3" className={classes.title}>
            {template.name}
          </Typography>

          <Box marginLeft="1rem">
            <IconButton aria-label="View on github" title="View on Github" onClick={handleOpenGithub} size="small">
              <GitHubIcon fontSize="small" />
            </IconButton>
          </Box>
        </Box>

        <Button
          className={classes.deployBtn}
          variant="contained"
          size="medium"
          color="primary"
          component={Link}
          to={UrlService.createDeploymentFromTemplate(template.id)}
        >
          <PublishIcon />
          &nbsp;Deploy
        </Button>
      </div>

      <Tabs value={activeTab} onChange={(ev, value) => setActiveTab(value)} indicatorColor="primary" textColor="primary">
        <Tab value="README" label="README" />
        <Tab value="SDL" label="SDL" />
        {template.guide && <Tab value="GUIDE" label="GUIDE" />}
      </Tabs>

      {activeTab === "README" && (
        <ViewPanel bottomElementId="footer" overflow="auto" padding="1rem">
          <ReactMarkdown linkTarget="_blank" remarkPlugins={[remarkGfm]} className="markdownContainer">
            {template.readme}
          </ReactMarkdown>
        </ViewPanel>
      )}
      {activeTab === "SDL" && (
        <ViewPanel bottomElementId="footer" overflow="hidden">
          <MonacoEditor height="100%" language="yaml" theme="vs-dark" value={template.deploy} options={{ ...monacoOptions, readOnly: true }} />
        </ViewPanel>
      )}
      {activeTab === "GUIDE" && (
        <ViewPanel bottomElementId="footer" overflow="auto" padding="1rem">
          <ReactMarkdown linkTarget="_blank" remarkPlugins={[remarkGfm]} className="markdownContainer">
            {template.guide}
          </ReactMarkdown>
        </ViewPanel>
      )}
    </div>
  );
}

CheckoutForm = ({ cartItems, cartOperations, promoCode }) => {
  const { currency } = useContext(CurrencyContext);
  const styles = useStyles();
  const appStyles = useAppStyles();
  const userData = useSelector(({ User }) => User.userData);
  const { t, i18n } = useTranslation();
  const language = i18n.language === 'ua' ? 0 : 1;
  const { clearCart } = cartOperations;
  const dispatch = useDispatch();
  const [deliveryType, setDeliveryType] = useState(
    getFromSessionStorage(SESSION_STORAGE.DELIVERY_TYPE) || deliveryTypes.SELFPICKUP
  );
  const [countryOption, setCountryOption] = useState(countryOptions.WITHIN_UKRAINE);
  const [initialValues, setInitialValues] = useState(stateInitialValues);
  const [pricesFromQuery, setPricesFromQuery] = useState([]);

  const handleCountryOption = (_, newTabValue) => setCountryOption(newTabValue);

  const { discount, categories } = promoCode?.getPromoCodeByCode || {};

  const totalPriceToPay = pricesFromQuery
    .map((item, index) => {
      const canUsePromoCode = categories?.includes(item.category?.code);
      const priceWithPromoCode = calcPriceForCart(item.price, cartItems[index]?.quantity, discount);
      const priceWithoutPromoCode = calcPriceForCart(item.price, cartItems[index]?.quantity);

      return canUsePromoCode ? priceWithPromoCode : priceWithoutPromoCode;
    })
    .reduce((previousValue, currentValue) => previousValue + currentValue, 0);

  const consentLink = (
    <div className={styles.consentMessage}>
      {' '}
      {t('checkout.checkoutAdditionalInfo.consent.0')}
      <Link
        className={styles.consentLink}
        to={pathToUserAgreement}
        target='_blank'
        rel='noreferrer'
      >
        {' '}
        {t('checkout.checkoutAdditionalInfo.consent.1')}{' '}
      </Link>{' '}
      {t('checkout.checkoutAdditionalInfo.consent.2')}
      <Link className={styles.consentLink} to={pathToTerms} target='_blank' rel='noreferrer'>
        {' '}
        {t('checkout.checkoutAdditionalInfo.consent.3')}{' '}
      </Link>
    </div>
  );

  const { values, handleSubmit, handleChange, setFieldValue, touched, errors } = useFormik({
    enableReinitialize: true,
    validationSchema: validationSchema(deliveryType, countryOption, t),
    initialValues,

    onSubmit: (data) => {
      if (data.paymentMethod === checkoutPayMethod.card) {
        dispatch(addPaymentMethod(checkoutPayMethod.card));
        dispatch(
          getFondyData({
            order: orderInputData(data, deliveryType, cartItems, countryOption),
            currency
          })
        );
      } else {
        dispatch(addOrder(orderInputData(data, deliveryType, cartItems, countryOption)));
        dispatch(addPaymentMethod(checkoutPayMethod.cash));
      }
      clearSessionStorage();
      clearCart();
    }
  });

  useEffect(() => {
    setToSessionStorage(SESSION_STORAGE.CHECKOUT_FORM, values);
  }, [values]);

  useEffect(() => {
    if (userData) {
      setInitialValues(updateInitialValues(userData, deliveryType));
    }
  }, [userData, deliveryType]);

  return (
    <div className={appStyles.rootApp}>
      <form onSubmit={handleSubmit} className={appStyles.containerApp}>
        <Grid item className={styles.checkoutFormContainer}>
          <div className={styles.checkoutTitleInfo}>
            <div className={styles.checkoutTitleInfoData}>
              <Link to={pathToCart} className={styles.backBtn}>
                <KeyboardBackspaceIcon color={getThemeColor()} className={styles.backBtnLine} />
              </Link>
            </div>
            <h2 className={styles.checkoutTitle}>{t('checkout.checkoutTitles.checkoutTitle')}</h2>
            <div className={styles.checkoutTitleLine} />
          </div>
          <Grid item className={styles.userInfoContainer}>
            <div>
              <h3 className={styles.title}>{t('checkout.checkoutTitles.contactInfo')}</h3>
              <div className={styles.contactInfoFields}>
                {userContactLabels.map((field) => (
                  <div key={field.name} className={styles.inputData}>
                    <TextField
                      data-testid={field.name}
                      size={TEXT_FIELDS.SMALL}
                      data-cy={field.name}
                      name={field.name}
                      className={styles.textField}
                      variant={TEXT_FIELD_VARIANT.OUTLINED}
                      label={field.label}
                      value={values[field.name]}
                      onChange={handleChange}
                      error={handleError(touched[field.name], errors[field.name])}
                      InputProps={
                        field.name === 'phoneNumber' && {
                          maxLength: 9,
                          startAdornment: <InputAdornment position='start'>+380</InputAdornment>
                        }
                      }
                    />
                    {touched[field.name] && errors[field.name] && (
                      <div data-cy={CY_CODE_ERR} className={styles.error}>
                        {t(errors[field.name])}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
            <h3 className={styles.deliveryTitle}>{t('checkout.checkoutTitles.delivery')}</h3>
            <Tabs
              className={styles.tabs}
              value={countryOption}
              TabIndicatorProps={{ style: { display: 'none' } }}
              onChange={handleCountryOption}
              variant='fullWidth'
              scrollButtons='auto'
              aria-label='delivery type'
            >
              <Tab
                className={styles.tab}
                label={t('checkout.tabs.withinUkraineDelivery')}
                value={countryOptions.WITHIN_UKRAINE}
              />
              <Tab
                className={styles.tab}
                label={t('checkout.tabs.worldWideDelivery')}
                value={countryOptions.WORLDWIDE}
              />
            </Tabs>
            <Delivery
              deliveryType={deliveryType}
              countryOption={countryOption}
              language={language}
              values={values}
              errors={errors}
              touched={touched}
              handleChange={handleChange}
              setFieldValue={setFieldValue}
              setDeliveryType={setDeliveryType}
            />
            <div>
              <h2 className={styles.title}>{t('checkout.checkoutTitles.payment')}</h2>
              <FormControl
                error={touched.paymentMethod && !!errors.paymentMethod}
                variant={TEXT_FIELD_VARIANT.OUTLINED}
                className={styles.formControl}
              >
                <InputLabel variant={TEXT_FIELD_VARIANT.OUTLINED}>
                  {t('checkout.checkoutTextFields.paymentMethod')}
                </InputLabel>
                <Select
                  data-testid='paymentMetod'
                  label={t('checkout.checkoutTextFields.paymentMethod')}
                  className={styles.paymentSelect}
                  data-cy='paymentMethod'
                  name='paymentMethod'
                  value={values.paymentMethod}
                  onChange={handleChange}
                >
                  {countryOption === countryOptions.WORLDWIDE ? (
                    <MenuItem value={checkoutPayMethod.card}>
                      {t(`checkout.checkoutPayment.${checkoutPayMethod.card}`)}
                    </MenuItem>
                  ) : (
                    Object.values(checkoutPayMethod).map((value) => (
                      <MenuItem key={value} value={value}>
                        {t(`checkout.checkoutPayment.${value}`)}
                      </MenuItem>
                    ))
                  )}
                </Select>
                {touched.paymentMethod && errors.paymentMethod && (
                  <div data-cy={CY_CODE_ERR} className={styles.error}>
                    {t(errors.paymentMethod)}
                  </div>
                )}
              </FormControl>
            </div>
            <div className={styles.contactPaymentInfo}>
              <h2 className={styles.title}>{t('checkout.checkoutTitles.orderComment')}</h2>
              <div>
                <TextField
                  size={TEXT_FIELDS.SMALL}
                  data-cy='userComment'
                  name='userComment'
                  multiline
                  rows={4}
                  className={styles.textAreaField}
                  variant={TEXT_FIELD_VARIANT.OUTLINED}
                  value={values.userComment}
                  onChange={handleChange}
                  error={handleError(touched.userComment, errors.userComment)}
                />
                {touched.userComment && errors.userComment && (
                  <div data-cy={CY_CODE_ERR} className={styles.error}>
                    {t(errors.userComment)}
                  </div>
                )}
              </div>
              <p className={styles.contactInfoAdditional}>
                {t('checkout.checkoutAdditionalInfo.additionalInfo')}
              </p>
            </div>
          </Grid>
          <Grid item className={styles.deliveryContainer}>
            <YourOrder
              checkoutFormBtnValue={checkoutFormBtnValue}
              consentLink={consentLink}
              t={t}
              currency={currency}
              totalPriceToPay={totalPriceToPay}
              values={values}
              language={language}
              styles={styles}
              deliveryType={deliveryType}
              setPricesFromQuery={setPricesFromQuery}
              promoCode={promoCode}
            />
          </Grid>
        </Grid>
      </form>
    </div>
  );
}

UsersDetails = (props) => {
  const {
    match: {
      params: { id }
    }
  } = props;
  const dispatch = useDispatch();

  const common = useCommonStyles();
  const styles = useStyles();

  const {
    sort: sortComment,
    replySort: sortReply,
    filtersUser: filtersComment,
    filtersReplyUser: filtersReply,
    listUser: listComment,
    listRepliesUser: listReplies,
    currentPage,
    rowsPerPage
  } = useSelector(commentSelectorWithPagination);

  const {
    sort: sortOrder,
    filtersUser: filtersOrder,
    listUser: listOrder
  } = useSelector(orderSelector);

  const { loading } = useSelector(({ Users }) => ({
    loading: Users.userLoading
  }));

  const {
    images,
    firstName,
    lastName,
    country,
    city,
    adress,
    postCode,
    email,
    isBanned,
    confirmed,
    phone
  } = useUsersHandler(id);

  const { tab, handleTabChange } = useOrdersCommentsTabs();

  useEffect(() => {
    if (tab) {
      if (filtersComment.typeComment === labels.comments.select[0].value) {
        dispatch(
          getCommentsByUser({
            filter: {
              date: {
                dateFrom: filtersComment.dateFrom,
                dateTo: filtersComment.dateTo
              },
              show: filtersComment.show,
              search: filtersComment.search
            },
            pagination: {
              limit: rowsPerPage,
              skip: currentPage * rowsPerPage
            },
            sort: sortComment,
            userId: id
          })
        );
      } else {
        dispatch(
          getRepliesCommentsByUser({
            filter: {
              createdAt: {
                dateFrom: filtersReply.dateFrom,
                dateTo: filtersReply.dateTo
              },
              filters: true,
              showReplyComment: filtersReply.show,
              search: filtersReply.search
            },
            pagination: {
              limit: rowsPerPage,
              skip: currentPage * rowsPerPage
            },
            sort: sortReply,
            userId: id
          })
        );
      }
    } else {
      dispatch(
        getOrderListUser({
          limit: rowsPerPage,
          skip: currentPage * rowsPerPage,
          filter: {
            date: {
              dateFrom: filtersOrder.dateFrom,
              dateTo: filtersOrder.dateTo
            },
            status: filtersOrder.status,
            paymentStatus: filtersOrder.paymentStatus,
            search: filtersOrder.search
          },
          sort: sortOrder,
          userId: id
        })
      );
    }
  }, [
    dispatch,
    tab,
    filtersComment,
    filtersReply,
    filtersOrder,
    rowsPerPage,
    currentPage,
    sortComment,
    sortReply,
    sortOrder,
    id
  ]);

  const tabs = tabNames.map((name) => <Tab key={name} label={name} />);

  if (loading) {
    return <LoadingBar />;
  }

  return (
    <div className={common.container}>
      <Grid className={styles.detailsContainer}>
        <UserDetailsCard
          info={{
            id,
            sections: {
              phone,
              country,
              city,
              adress,
              postCode
            },
            images,
            firstName,
            lastName,
            isBanned,
            email,
            confirmed
          }}
          pathBack={pathToUsers}
        />
      </Grid>
      <AppBar position='static' color='primary'>
        <Tabs
          value={tab}
          className={common.tabs}
          onChange={(_, nextTab) => handleTabChange(nextTab)}
          variant='fullWidth'
        >
          {tabs}
        </Tabs>
      </AppBar>
      <TabPanel value={tab} index={0}>
        <OrderTab list={listOrder} />
      </TabPanel>
      <TabPanel value={tab} index={1}>
        {filtersComment.typeComment === labels.comments.select[0].value ? (
          <CommentTab list={listComment} />
        ) : (
          <CommentReplyTab list={listReplies} />
        )}
      </TabPanel>
    </div>
  );
}

function ReportComponent (props) {
  const [reportDetailsOpen, setReportDetailsOpen] = React.useState(false)
  const [status, setStatus] = React.useState(null)
  const [reportStatus, setReportStatus] = React.useState(null)
  const [tab, setTab] = React.useState(0)
  const auth = useSelector(state => state.authReducer)
  const stateList = useSelector(state => state.projectReducer.states)
  const dispatch = useDispatch()

  useEffect(() => {
    const query = new URLSearchParams(props.location.search)
    var project_id = query.get('project_id')
    dispatch(fetchRole())
    if (!reportDetailsOpen) {
      dispatch(getStatus(project_id))
    }
  }, [props.location.search, dispatch, reportDetailsOpen])

  const handleChangeTab = (event, newValue) => {
    setTab(newValue)
  }
  const handleSelectChange = (event) => {
    setStatus(event.target.value)
  }

  const handleReportDetailsOpen = (e) => {
    if (reportDetailsOpen) {
      setReportStatus(null)
    }
    setReportDetailsOpen(!reportDetailsOpen)
  }
  const onSelectReportStatus = (e, report_id) => {
    if (reportStatus) {
      var temp = [...reportStatus]
    } else {
      temp = []
    }
    var report = { id: report_id, approved: e.target.value }
    temp.push(report)
    setReportStatus(temp)
  }
  const onClick = (type) => {
    const query = new URLSearchParams(props.location.search)
    var project_id = query.get('project_id')
    switch (type) {
      case 'Change State':
        dispatch(approveReports(project_id, reportStatus, status))
        props.changedStatus()
        handleReportDetailsOpen()
        break
      default:
        break
    }
  }
  const DialogTitle = withStyles(styles)((props) => {
    const { children, classes, onClose, ...other } = props
    return (
      <MuiDialogTitle disableTypography className={classes.root} {...other}>
        <Typography variant="h6">{children}</Typography>
        {onClose ? (
          <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
            <CloseIcon />
          </IconButton>
        ) : null}
      </MuiDialogTitle>
    )
  })
  return (
    <>{auth.user && <Paper style={{ padding: '0.06% 1%' }}>

      <h3 style={{ color: 'red' }}>This is a reported project
        <Button style={{ float: 'right', verticalAlign: 'super' }} onClick={handleReportDetailsOpen}>View Reports</Button></h3>
      <Dialog
        open={reportDetailsOpen}
        onClose={(handleReportDetailsOpen)}
        fullWidth={true}
        maxWidth={'md'}>
        <DialogTitle style={{ paddingBottom: '0' }}><h1 style={{ marginBottom: '0', marginTop: '0' }}>Reports</h1></DialogTitle>
        <DialogContent>
          <Tabs value={tab} onChange={handleChangeTab}>
            <Tab label="Open Reports" {...a11yProps(0)} />
            <Tab label="Approved Reports" {...a11yProps(1)} />
            {auth.user.username !== props.project.details.author_name && auth.roles?.is_type_reviewer && <Tab label="Closed Reports" {...a11yProps(2)} />}
          </Tabs>
          <TabPanel value={tab} index={0}>
            {(props.project.reports.open[0] && auth.user.username !== props.project.details.author_name && auth.roles?.is_type_reviewer) && <h3 style={{ marginTop: '0' }}>Do you want to approve any reports?</h3>}
            {props.project.reports ? props.project.reports.open.map((item, index) => (
              <Paper key={index} style={{ margin: '1% .2%', padding: '.5% .7%' }}>
                <Grid container>
                  <Grid item xs={6}>
                    <p>
                      {item.description}
                    </p>
                  </Grid>
                  {auth.user.username !== props.project.details.author_name && auth.roles?.is_type_reviewer &&
                    <Grid item xs={6}>
                      <Select
                        defaultValue={item.approved}
                        variant='outlined'
                        style={{ float: 'right' }}
                        onChange={(e) => onSelectReportStatus(e, item.id)}
                      >
                        <MenuItem value={null}>None</MenuItem>
                        <MenuItem value={true}>Approve</MenuItem>
                        <MenuItem value={false}>Reject</MenuItem>
                      </Select>
                    </Grid>}
                </Grid>
              </Paper>
            )) : <>No Open Reports</>}
          </TabPanel>
          <TabPanel value={tab} index={1}>
            {props.project.reports.approved[0] ? props.project.reports.approved.map((item, index) => (
              <Paper key={index} style={{ margin: '1% .2%', padding: '.5% .7%' }}>
                <Grid container>
                  <Grid item xs={6}>
                    <p>
                      {item.description}
                    </p>
                  </Grid>
                  {auth.user.username !== props.project.details.author_name &&
                    <Grid item xs={6}>
                    </Grid>}
                </Grid>
              </Paper>
            )) : <>No Approved Reports</>}
          </TabPanel>
          {auth.user.username !== props.project.details.author_name && <TabPanel value={tab} index={2}>
            {props.project.reports && props.project.reports.closed.map((item, index) => (
              <Paper key={index} style={{ margin: '1% .2%', padding: '.5% .7%' }}>
                <Grid container>
                  <Grid item xs={6}>
                    <p>
                      {item.description}
                    </p>
                  </Grid>{auth.user.username !== props.project.details.author_name &&
                    <Grid item xs={6}>
                    </Grid>}
                </Grid>
              </Paper>
            ))}
          </TabPanel>}
          {stateList && ((tab === 1 && props.project.reports.approved[0]) || (tab === 0 && reportStatus)) && auth.roles?.is_type_reviewer && auth.user.username !== props.project.details.author_name &&
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              autoWidth
              style={{ width: '50%' }}
              onChange={handleSelectChange}
              value={status}
              variant='outlined'
            >
              {stateList.map((item, index) =>
                (
                  <MenuItem key={index} value={item}>{item}</MenuItem>
                ))}
            </Select>}
        </DialogContent>
        {auth.roles && <DialogActions>
          {auth.user.username !== props.project.details.author_name && props.project.reports.approved[0] && auth.roles?.is_type_reviewer && tab === 1 && <Button onClick={() => {
            dispatch(resolveReports(props.project.details.project_id, status))
            handleReportDetailsOpen()
          }}>Resolve All Reports</Button>}
          {auth.roles?.is_type_reviewer && (reportStatus) &&
            <Button onClick={() => {
              onClick('Change State')
            }}>Approve Reports</Button>}
          <Button onClick={handleReportDetailsOpen}>Close</Button>
        </DialogActions>}

      </Dialog>
    </Paper>}</>

  )
}

export default function AddTokenDialog({ open, onClose }) {
  let wallet = useWallet();
  let [tokenAccountCost] = useAsyncData(
    wallet.tokenAccountCost,
    wallet.tokenAccountCost,
  );
  let classes = useStyles();
  let updateTokenName = useUpdateTokenName();
  const [sendTransaction, sending] = useSendTransaction();

  const [walletAccounts] = useWalletTokenAccounts();
  const popularTokens = usePopularTokens();
  const [tab, setTab] = useState(!!popularTokens ? 'popular' : 'manual');
  const [mintAddress, setMintAddress] = useState('');
  const [tokenName, setTokenName] = useState('');
  const [tokenSymbol, setTokenSymbol] = useState('');
  const [erc20Address, setErc20Address] = useState('');

  useEffect(() => {
    if (!popularTokens) {
      setTab('manual');
    }
  }, [popularTokens]);

  function onSubmit(params) {
    if (tab === 'manual') {
      params = { mintAddress, tokenName, tokenSymbol };
    } else if (tab === 'erc20') {
      params = { erc20Address };
    }
    sendTransaction(addToken(params), {
      onSuccess: () => {
        refreshWalletPublicKeys(wallet);
        onClose();
      },
    });
  }

  async function addToken({
    mintAddress,
    tokenName,
    tokenSymbol,
    erc20Address,
  }) {
    if (erc20Address) {
      let tokenInfo = await swapApiRequest('POST', `coins/eth/${erc20Address}`);
      mintAddress = tokenInfo.splMint;
      tokenName = tokenInfo.name;
      tokenSymbol = tokenInfo.ticker;
      if (tokenInfo.blockchain !== 'sol') {
        tokenName = 'Wrapped ' + tokenName;
      }
    }

    let mint = new PublicKey(mintAddress);
    updateTokenName(mint, tokenName, tokenSymbol);
    const resp = await wallet.createAssociatedTokenAccount(mint);
    return resp[1];
  }

  let valid = true;
  if (tab === 'erc20') {
    valid = erc20Address.length === 42 && erc20Address.startsWith('0x');
  }

  return (
    <DialogForm open={open} onClose={onClose}>
      <DialogTitle>Add Token</DialogTitle>
      <DialogContent>
        {tokenAccountCost ? (
          <DialogContentText>
            Add a token to your wallet. This will cost{' '}
            {feeFormat.format(tokenAccountCost / LAMPORTS_PER_SOL)} SOL.
          </DialogContentText>
        ) : (
          <LoadingIndicator />
        )}
        {!!popularTokens && (
          <Tabs
            value={tab}
            textColor="primary"
            indicatorColor="primary"
            className={classes.tabs}
            onChange={(e, value) => setTab(value)}
          >
            <Tab label="Popular Tokens" value="popular" />
            {showSwapAddress ? <Tab label="ERC20 Token" value="erc20" /> : null}
            <Tab label="Manual Input" value="manual" />
          </Tabs>
        )}
        {tab === 'manual' || !popularTokens ? (
          <React.Fragment>
            <TextField
              label="Token Mint Address"
              fullWidth
              variant="outlined"
              margin="normal"
              value={mintAddress}
              onChange={(e) => setMintAddress(e.target.value)}
              autoFocus
              disabled={sending}
            />
            <TextField
              label="Token Name"
              fullWidth
              variant="outlined"
              margin="normal"
              value={tokenName}
              onChange={(e) => setTokenName(e.target.value)}
              disabled={sending}
            />
            <TextField
              label="Token Symbol"
              fullWidth
              variant="outlined"
              margin="normal"
              value={tokenSymbol}
              onChange={(e) => setTokenSymbol(e.target.value)}
              disabled={sending}
            />
          </React.Fragment>
        ) : tab === 'popular' ? (
          <List disablePadding>
            {popularTokens.filter(tokenInfo => tokenInfo.address).map((tokenInfo) => (
              <TokenListItem
                key={tokenInfo.address}
                tokenInfo={tokenInfo}
                existingAccount={(walletAccounts || []).find(
                  (account) =>
                    account.parsed.mint.toBase58() === tokenInfo.address,
                )}
                onSubmit={onSubmit}
                disabled={sending}
              />
            ))}
          </List>
        ) : tab === 'erc20' ? (
          <>
            <TextField
              label="ERC20 Contract Address"
              fullWidth
              variant="outlined"
              margin="normal"
              value={erc20Address}
              onChange={(e) => setErc20Address(e.target.value.trim())}
              autoFocus
              disabled={sending}
            />
            {erc20Address && valid ? (
              <Link
                href={`https://etherscan.io/token/${erc20Address}`}
                target="_blank"
                rel="noopener"
              >
                View on Etherscan
              </Link>
            ) : null}
          </>
        ) : null}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        {tab !== 'popular' && (
          <Button
            type="submit"
            color="primary"
            disabled={sending || !valid}
            onClick={() => onSubmit({ tokenName, tokenSymbol, mintAddress })}
          >
            Add
          </Button>
        )}
      </DialogActions>
    </DialogForm>
  );
}

function Login(props) {
  var classes = useStyles();

  // global
  var userDispatch = useUserDispatch();

  // local
  var [isLoading, setIsLoading] = useState(false);
  var [error, setError] = useState(null);
  var [activeTabId, setActiveTabId] = useState(0);
  var [nameValue, setNameValue] = useState("");
  var [loginValue, setLoginValue] = useState("[email protected]");
  var [passwordValue, setPasswordValue] = useState("password");

  return (
    <Grid container className={classes.container}>
      <div className={classes.logotypeContainer}>
        <img src={logo} alt="logo" className={classes.logotypeImage} />
        <Typography className={classes.logotypeText}>Material Admin</Typography>
      </div>
      <div className={classes.formContainer}>
        <div className={classes.form}>
          <Tabs
            value={activeTabId}
            onChange={(e, id) => setActiveTabId(id)}
            indicatorColor="primary"
            textColor="primary"
            centered
          >
            <Tab label="Login" classes={{ root: classes.tab }} />
            <Tab label="New User" classes={{ root: classes.tab }} />
          </Tabs>
          {activeTabId === 0 && (
            <React.Fragment>
              <Typography variant="h1" className={classes.greeting}>
                Good Morning, User
              </Typography>
              <Button size="large" className={classes.googleButton}>
                <img src={google} alt="google" className={classes.googleIcon} />
                &nbsp;Sign in with Google
              </Button>
              <div className={classes.formDividerContainer}>
                <div className={classes.formDivider} />
                <Typography className={classes.formDividerWord}>or</Typography>
                <div className={classes.formDivider} />
              </div>
              <Fade in={error}>
                <Typography color="secondary" className={classes.errorMessage}>
                  Something is wrong with your login or password :(
                </Typography>
              </Fade>
              <TextField
                id="email"
                InputProps={{
                  classes: {
                    underline: classes.textFieldUnderline,
                    input: classes.textField,
                  },
                }}
                value={loginValue}
                onChange={e => setLoginValue(e.target.value)}
                margin="normal"
                placeholder="Email Adress"
                type="email"
                fullWidth
              />
              <TextField
                id="password"
                InputProps={{
                  classes: {
                    underline: classes.textFieldUnderline,
                    input: classes.textField,
                  },
                }}
                value={passwordValue}
                onChange={e => setPasswordValue(e.target.value)}
                margin="normal"
                placeholder="Password"
                type="password"
                fullWidth
              />
              <div className={classes.formButtons}>
                {isLoading ? (
                  <CircularProgress size={26} className={classes.loginLoader} />
                ) : (
                  <Button
                    disabled={
                      loginValue.length === 0 || passwordValue.length === 0
                    }
                    onClick={() =>
                      loginUser(
                        userDispatch,
                        loginValue,
                        passwordValue,
                        props.history,
                        setIsLoading,
                        setError,
                      )
                    }
                    variant="contained"
                    color="primary"
                    size="large"
                  >
                    Login
                  </Button>
                )}
                <Button
                  color="primary"
                  size="large"
                  className={classes.forgetButton}
                >
                  Forget Password
                </Button>
              </div>
            </React.Fragment>
          )}
          {activeTabId === 1 && (
            <React.Fragment>
              <Typography variant="h1" className={classes.greeting}>
                Welcome!
              </Typography>
              <Typography variant="h2" className={classes.subGreeting}>
                Create your account
              </Typography>
              <Fade in={error}>
                <Typography color="secondary" className={classes.errorMessage}>
                  Something is wrong with your login or password :(
                </Typography>
              </Fade>
              <TextField
                id="name"
                InputProps={{
                  classes: {
                    underline: classes.textFieldUnderline,
                    input: classes.textField,
                  },
                }}
                value={nameValue}
                onChange={e => setNameValue(e.target.value)}
                margin="normal"
                placeholder="Full Name"
                type="text"
                fullWidth
              />
              <TextField
                id="email"
                InputProps={{
                  classes: {
                    underline: classes.textFieldUnderline,
                    input: classes.textField,
                  },
                }}
                value={loginValue}
                onChange={e => setLoginValue(e.target.value)}
                margin="normal"
                placeholder="Email Adress"
                type="email"
                fullWidth
              />
              <TextField
                id="password"
                InputProps={{
                  classes: {
                    underline: classes.textFieldUnderline,
                    input: classes.textField,
                  },
                }}
                value={passwordValue}
                onChange={e => setPasswordValue(e.target.value)}
                margin="normal"
                placeholder="Password"
                type="password"
                fullWidth
              />
              <div className={classes.creatingButtonContainer}>
                {isLoading ? (
                  <CircularProgress size={26} />
                ) : (
                  <Button
                    onClick={() =>
                      loginUser(
                        userDispatch,
                        loginValue,
                        passwordValue,
                        props.history,
                        setIsLoading,
                        setError,
                      )
                    }
                    disabled={
                      loginValue.length === 0 ||
                      passwordValue.length === 0 ||
                      nameValue.length === 0
                    }
                    size="large"
                    variant="contained"
                    color="primary"
                    fullWidth
                    className={classes.createAccountButton}
                  >
                    Create your account
                  </Button>
                )}
              </div>
              <div className={classes.formDividerContainer}>
                <div className={classes.formDivider} />
                <Typography className={classes.formDividerWord}>or</Typography>
                <div className={classes.formDivider} />
              </div>
              <Button
                size="large"
                className={classnames(
                  classes.googleButton,
                  classes.googleButtonCreating,
                )}
              >
                <img src={google} alt="google" className={classes.googleIcon} />
                &nbsp;Sign in with Google
              </Button>
            </React.Fragment>
          )}
        </div>
        <Typography color="primary" className={classes.copyright}>
        © 2014-{new Date().getFullYear()} <a style={{ textDecoration: 'none', color: 'inherit' }} href="https://flatlogic.com" rel="noopener noreferrer" target="_blank">Flatlogic</a>, LLC. All rights reserved.
        </Typography>
      </div>
    </Grid>
  );
}

function VerticalTabs(props) {
	const {
		color,
		setColor,
		fillColor,
		setFillColor,
		fillOpacity,
		setFillOpacity,
		setBowing,
		setFillStyle,
		setFillWeight,
		setHachureAngle,
		setHachureGap,
		bowing,
		fillStyle,
		fillWeight,
		hachureAngle,
		hachureGap,
		background,
		setBackground,
		width,
		setWidth,
		stroke,
		setStroke,
		roughness,
		setRoughness,
		type,
		setType,
		fontSize,
		setFontSize,
		fontStyle,
		setFontStyle,
		fontFamily,
		setFontFamily,
		edge,
		setEdge,
		clear,
		download,
		initiateLoadSaved,
		loadLastState,
		saveInstance,
	} = props;
	const [displayColorPicker, setDisplayColorPicker] = useState(false);
	const ColorPicker = props => {
		const { width, name, color, onColorChange } = props;
		return (
			<div className={styles.root}>
				<div className={styles.swatch}>
					<div
						className={styles.colorIndicator}
						style={{
							backgroundColor: props.color || "#fff",
						}}
						onMouseDown={() => {
							setDisplayColorPicker(true);
						}}
					/>
				</div>
				{displayColorPicker ? (
					<ClickAwayListener
						onClickAway={() => {
							setDisplayColorPicker(false);
						}}
					>
						<div className={styles.popover}>
							<ChromePicker
								width={width}
								name={name}
								color={color}
								onChangeComplete={color => onColorChange(color.hex)}
							/>
						</div>
					</ClickAwayListener>
				) : null}
			</div>
		);
	};

	const classes = useStyles();
	const [value, setValue] = React.useState(0);
	const handleChange = (event, newValue) => {
		setValue(newValue);
	};

	function Feature({ title, children, classname }) {
		return (
			<ListItem>
				<div className={styles.feature + " " + classname}>
					<ListItemText className={styles.title}>{title}</ListItemText>
					<div className={styles.body}>{children}</div>
				</div>
			</ListItem>
		);
	}

	function Shape({ type_, id, label, children }) {
		return (
			<label style={{ marginTop: "3px" }} htmlFor={id} title={label}>
				<div
					className={`${styles.feature} ${
						type === type_ && styles.active_feature
					}`}
					onClick={() => setType(type_)}
					id={id}
				>
					{children}
				</div>
			</label>
		);
	}

	return (
		<div className={styles.toolbox_root}>
			<div className={styles.canvas_toolbox}>
				<div className={classes.root}>
					<Tabs
						orientation="vertical"
						variant="scrollable"
						value={value}
						onChange={handleChange}
						className={classes.tabs}
					>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Project">
									<AccountTree />
								</label>
							}
							{...a11yProps(0)}
						/>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Canvas Setup">
									<RiFileSettingsLine size={25} />
								</label>
							}
							{...a11yProps(1)}
						/>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Shapes & Tools">
									<FaShapes size={25} />
								</label>
							}
							{...a11yProps(2)}
						/>
						<Tab
							onClick={() => setType("text")}
							label={
								<label title="Text">
									<TextFields />
								</label>
							}
							{...a11yProps(3)}
						/>
						<Tab
							onClick={() => {
								setType("pen");
							}}
							label={
								<label title="Icon Library">
									<Apps />
								</label>
							}
							{...a11yProps(4)}
						/>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Minimize Sidebar">
									<Close />
								</label>
							}
							{...a11yProps(5)}
						/>
					</Tabs>
					<TabPanel value={value} index={0}>
						<List component="div">
							<ListItem button onClick={clear}>
								<ListItemIcon>
									<Delete />
								</ListItemIcon>
								<ListItemText primary="Clear Canvas" />
							</ListItem>
							<ListItem button onClick={download}>
								<ListItemIcon>
									<SaveAlt />
								</ListItemIcon>
								<ListItemText primary="Download PNG" />
							</ListItem>
							<ListItem
								button
								onClick={() => initiateLoadSaved("img-file-selector")}
							>
								<ListItemIcon>
									<PhotoLibrary />
									<input
										type="file"
										id="img-file-selector"
										style={{ display: "none" }}
										accept="image/*"
										onChange={event => loadLastState(event)}
									/>
								</ListItemIcon>
								<ListItemText primary="Place Image" />
							</ListItem>
							<ListItem
								button
								onClick={() => saveInstance("savedProgress.d2ps")}
							>
								<ListItemIcon>
									<Save />
								</ListItemIcon>
								<ListItemText primary="Save & download Progress" />
							</ListItem>
							<ListItem
								button
								onClick={() => initiateLoadSaved("file-selector")}
							>
								<ListItemIcon style={{ width: 0 }}>
									<D2psIcon
										style={{
											transform: "scale(0.6) translateX(-30px)",
										}}
									/>
									<input
										type="file"
										id="file-selector"
										style={{ display: "none" }}
										accept=".d2ps"
										onChange={event => loadLastState(event)}
									/>
								</ListItemIcon>
								<ListItemText primary="Load Previous Progress" />
							</ListItem>
						</List>
					</TabPanel>
					<TabPanel value={value} index={1}>
						<List component="div">
							<Feature title="Canvas Setup">
								<div className={styles.colorPicker}>
									<ColorPicker
										width={200}
										name="canvas_bg_color"
										color={background}
										onColorChange={setBackground}
									/>
									<input
										className={styles.hexInput}
										placeholder="#"
										type="text"
										value={background}
										onInput={e => setBackground(e.target.value)}
									/>
								</div>
							</Feature>
						</List>
					</TabPanel>
					<TabPanel value={value} index={2}>
						<List component="div">
							<Feature title="Shapes and Tools">
								<Shape type_="pen" id="sketch-shapes-pen" label="Pen">
									<FaPencilAlt size={12} />
								</Shape>
								<Shape type_="line" id="sketch-shapes-line" label="Line">
									<FaSlash size={10} />
								</Shape>
								<Shape type_="square" id="sketch-shapes-square" label="Square">
									<FaRegSquare size={10} />
								</Shape>
								<Shape type_="circle" id="sketch-shapes-circle" label="Circle">
									<FaRegCircle size={10} />
								</Shape>
								<Shape
									type_="triangle"
									id="sketch-shapes-triangle"
									label="Triangle"
								>
									<GiTriangleTarget size={12} />
								</Shape>
								<Shape type_="arrow" id="sketch-shapes-arrow" label="Arrow">
									<BsArrowUpRight size={12} />
								</Shape>
								<Shape
									type_="diamond"
									id="sketch-shapes-diamond"
									label="Diamond"
								>
									<BsDiamond size={10} />
								</Shape>
								<Shape
									type_="biShapeTriangle"
									id="sketch-shapes-biShapeTriangle"
									label="Bi Shape Triangle"
								>
									<BiShapeTriangle size={12} />
								</Shape>
							</Feature>
							<Divider />
							{!["text", "pen", "line"].includes(type) && (
								<>
									<Feature title="Fill Style">
										<select
											name="shape_fill_style"
											value={fillStyle}
											onChange={e => setFillStyle(e.target.value)}
										>
											<option value="none">none</option>
											<option value="solid">solid</option>
											<option value="hachure">hachure</option>
											<option value="zigzag">zigzag</option>
											<option value="cross-hatch">cross-hatch</option>
											<option value="dots">dots</option>
											<option value="dashed">dashed</option>
											<option value="zigzag-line">zigzag-line</option>
										</select>
									</Feature>
									{fillStyle !== "none" && (
										<>
											<Feature title="Fill Color">
												<div className={styles.colorPicker}>
													<ColorPicker
														width={200}
														name="canvas_pen_color"
														color={fillColor}
														onColorChange={setFillColor}
													/>
													<input
														className={styles.hexInput}
														placeholder="#"
														type="text"
														value={fillColor}
														onInput={e => setFillColor(e.target.value)}
													/>
												</div>
											</Feature>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Opacity"}
											>
												<input
													className={styles.slider}
													type="range"
													min={0}
													max={1}
													step={0.1}
													value={fillOpacity}
													onChange={e => setFillOpacity(e.target.value)}
												/>
											</Feature>
										</>
									)}
									{!["none", "solid"].includes(fillStyle) && (
										<>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Weight"}
											>
												<input
													className={styles.slider}
													type="range"
													min={1}
													max={10}
													step={0.1}
													value={fillWeight}
													onChange={e => setFillWeight(e.target.value)}
												/>
											</Feature>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Hachure Angle"}
											>
												<input
													className={styles.slider}
													type="range"
													min={0}
													max={360}
													step={1}
													value={hachureAngle + 180}
													onChange={e => setHachureAngle(e.target.value - 180)}
												/>
											</Feature>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Hachure Gap"}
											>
												<input
													className={styles.slider}
													type="range"
													min={1}
													max={10}
													step={0.1}
													value={hachureGap}
													onChange={e => setHachureGap(e.target.value)}
												/>
											</Feature>
										</>
									)}
									<Divider />
								</>
							)}

							<Feature title="Stroke">
								<div className={styles.colorPicker}>
									<ColorPicker
										width={200}
										name="canvas_pen_color"
										color={color}
										onColorChange={setColor}
									/>
									<input
										className={styles.hexInput}
										placeholder="#"
										type="text"
										value={color}
										onInput={e => setColor(e.target.value)}
									/>
								</div>
							</Feature>
							<Feature classname={styles.sliderWrapper} title={"Roughness"}>
								<input
									className={styles.slider}
									type="range"
									min={0}
									max={5}
									step={0.1}
									value={roughness}
									onChange={e => setRoughness(e.target.value)}
								/>
							</Feature>
							<Feature classname={styles.sliderWrapper} title={"Stroke Bowing"}>
								<input
									className={styles.slider}
									type="range"
									min={0}
									max={10}
									step={0.1}
									value={bowing}
									onChange={e => setBowing(e.target.value)}
								/>
							</Feature>
							<Feature title="Stroke Width">
								<select
									name="canvas_pen_width"
									value={width}
									onChange={e => setWidth(e.target.value)}
								>
									<option value="1">1px</option>
									<option value="2">2px</option>
									<option value="3">3px</option>
									<option value="4">4px</option>
									<option value="5">5px</option>
									<option value="6">6px</option>
									<option value="7">7px</option>
									<option value="8">8px</option>
									<option value="9">9px</option>
									<option value="10">10px</option>
									<option value="11">11px</option>
								</select>
							</Feature>
							<Feature title="Stroke Style">
								<div
									className={`${styles.feature_box} ${
										stroke === "none" && styles.active_feature_box
									}`}
									onClick={() => setStroke("none")}
								>
									<AiOutlineLine size={20} />
								</div>
								<div
									className={`${styles.feature_box} ${
										stroke === "small" && styles.active_feature_box
									}`}
									onClick={() => setStroke("small")}
								>
									<AiOutlineSmallDash size={20} />
								</div>
								<div
									className={`${styles.feature_box} ${
										stroke === "big" && styles.active_feature_box
									}`}
									onClick={() => setStroke("big")}
								>
									<AiOutlineDash size={20} />
								</div>
							</Feature>
							<Feature title="Edge">
								<select value={edge} onChange={e => setEdge(e.target.value)}>
									<option value="round">Round</option>
									<option value="bevel">Bevel</option>
									<option value="miter">Miter</option>
								</select>
							</Feature>
						</List>
					</TabPanel>
					<TabPanel value={value} index={3}>
						<List component="div">
							<Feature title="Stroke">
								<div className={styles.colorPicker}>
									<ColorPicker
										width={200}
										name="canvas_pen_color"
										color={color}
										onColorChange={setColor}
									/>
									<input
										className={styles.hexInput}
										placeholder="#"
										type="text"
										value={color}
										onInput={e => setColor(e.target.value)}
									/>
								</div>
							</Feature>
							<Feature
								classname={styles.sliderWrapper}
								title={`Font [ ${fontSize} ]`}
							>
								<input
									className={styles.slider}
									type="range"
									min="10"
									max="20"
									value={fontSize * 10}
									onChange={e => setFontSize(e.target.value / 10)}
								/>
							</Feature>
							<Feature title="Font Style">
								<div
									className={`${styles.feature_box} ${
										fontStyle === "normal" && styles.active_feature_box
									}`}
									onClick={() => setFontStyle("normal")}
								>
									<BsFonts size={20} />
								</div>
								<div
									className={`${styles.feature_box} ${
										fontStyle === "italic" && styles.active_feature_box
									}`}
									onClick={() => setFontStyle("italic")}
								>
									<FaItalic size={15} />
								</div>
								<div
									className={`${styles.feature_box} ${
										fontStyle === "bold" && styles.active_feature_box
									}`}
									onClick={() => setFontStyle("bold")}
								>
									<FaBold size={15} />
								</div>
							</Feature>
							<Feature title="Font Family">
								<select
									value={fontFamily}
									onChange={e => setFontFamily(e.target.value)}
								>
									<option value="cursive">Cursive</option>
									<option value="Courier New">Courier New</option>
									<option value="serif">Serif</option>
								</select>
							</Feature>
						</List>
					</TabPanel>
					<TabPanel value={value} index={4}>
						<List component="div">
							<IconsLibrary />
						</List>
					</TabPanel>
					<TabPanel
						className={classes.tabPanelClose}
						value={value}
						index={5}
					></TabPanel>
				</div>
			</div>
		</div>
	);
}

ProjectsDraftsGrid = ({
  profile,
  projects,
  drafts,
  handleSetState,
  ...props
}) => {
  const classes = useStyles();

  const history = useHistory();
  const { t } = useTranslation();
  const [value, setValue] = React.useState(0);

  const handleChange = (e, newValue) => {
    setValue(newValue);
  };

  return (
    <Paper className={classes.profileLowerStyle}>
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="basic tabs example"
          classes={{
            indicator: classes.indicator,
          }}
        >
          <Tab
            label="Projects"
            {...a11yProps(0)}
            className={classes.tabStyle}
          />
          <Tab label="Drafts" {...a11yProps(1)} className={classes.tabStyle} />
        </Tabs>
      </Box>
      <TabPanel value={value} index={0}>
        <CustomButton
          className={clsx(classes.viewAllBtn)}
          variant="outlined"
          margin="normal"
          secondaryButtonStyle
          onClick={() => history.push(`/creators/${profile.username}/projects`)}
        >
          {t('profile.projects.viewAll')}
        </CustomButton>
        <Grid container>
          {Array.isArray(projects) &&
            projects.map(project => (
              <Grid
                item
                xs={12}
                sm={6}
                md={6}
                className={classes.gridStyle}
                align="center"
              >
                <Project
                  project={project}
                  key={project.id}
                  updateProjects={res =>
                    handleSetState(updateProjects(res, projects, t, toast))
                  }
                  {...props}
                />
              </Grid>
            ))}
        </Grid>
      </TabPanel>
      <TabPanel value={value} index={1}>
        <CustomButton
          className={clsx(classes.viewAllBtn)}
          variant="outlined"
          margin="normal"
          secondaryButtonStyle
          onClick={() => history.push(`/creators/${profile.username}/drafts`)}
        >
          {t('profile.projects.viewAll')}
        </CustomButton>
        <Grid container>
          {Array.isArray(drafts) &&
            drafts.map(draft => (
              <Grid
                item
                xs={12}
                sm={6}
                md={6}
                className={classes.gridStyle}
                align="center"
              >
                <Project
                  project={draft}
                  key={draft.id}
                  updateProjects={res =>
                    handleSetState(updateDrafts(res, drafts, t, toast))
                  }
                  {...props}
                />
              </Grid>
            ))}
        </Grid>
      </TabPanel>
    </Paper>
  );
}