text: import { Icon } from '@iconify/react';
  import { capitalCase } from 'change-case';
  import { useEffect, useState } from 'react';
  import heartFill from '@iconify/icons-eva/heart-fill';
  import peopleFill from '@iconify/icons-eva/people-fill';
  import roundPermMedia from '@iconify/icons-ic/round-perm-media';
  import roundAccountBox from '@iconify/icons-ic/round-account-box';
  // material
  import { experimentalStyled as styled } from '@material-ui/core/styles';
  import { Tab, Box, Card, Tabs, Container } from '@material-ui/core';
  // redux
  import { useDispatch, useSelector } from '../../redux/store';
  import { getPosts, getGallery, getFriends, getProfile, getFollowers, onToggleFollow } from '../../redux/slices/user';
  // routes
  import { PATH_DASHBOARD } from '../../routes/paths';
  // hooks
  import useAuth from '../../hooks/useAuth';
  // components
  import Page from '../../components/Page';
  import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
  import {
    Profile,
    ProfileCover,
    ProfileFriends,
    ProfileGallery,
    ProfileFollowers
  } from '../../components/_dashboard/user/profile';
  
  // ----------------------------------------------------------------------
  
  const TabsWrapperStyle = styled('div')(({ theme }) => ({
    zIndex: 9,
    bottom: 0,
    width: '100%',
    display: 'flex',
    position: 'absolute',
    backgroundColor: theme.palette.background.paper,
    [theme.breakpoints.up('sm')]: {
      justifyContent: 'center'
    },
    [theme.breakpoints.up('md')]: {
      justifyContent: 'flex-end',
      paddingRight: theme.spacing(3)
    }
  }));
  
  // ----------------------------------------------------------------------
  
  export default function UserProfile() {
    const dispatch = useDispatch();
    const { myProfile, posts, followers, friends, gallery } = useSelector((state) => state.user);
    const { user } = useAuth();
    const [currentTab, setCurrentTab] = useState('profile');
    const [findFriends, setFindFriends] = useState('');
  
    useEffect(() => {
      dispatch(getProfile());
      dispatch(getPosts());
      dispatch(getFollowers());
      dispatch(getFriends());
      dispatch(getGallery());
    }, [dispatch]);
  
    const handleChangeTab = (event, newValue) => {
      setCurrentTab(newValue);
    };
  
    const handleToggleFollow = (followerId) => {
      dispatch(onToggleFollow(followerId));
    };
  
    const handleFindFriends = (event) => {
      setFindFriends(event.target.value);
    };
  
    if (!myProfile) {
      return null;
    }
  
    const PROFILE_TABS = [
      {
        value: 'profile',
        icon: <Icon icon={roundAccountBox} width={20} height={20} />,
        component: <Profile myProfile={myProfile} posts={posts} />
      },
      {
        value: 'followers',
        icon: <Icon icon={heartFill} width={20} height={20} />,
        component: <ProfileFollowers followers={followers} onToggleFollow={handleToggleFollow} />
      },
      {
        value: 'friends',
        icon: <Icon icon={peopleFill} width={20} height={20} />,
        component: <ProfileFriends friends={friends} findFriends={findFriends} onFindFriends={handleFindFriends} />
      },
      {
        value: 'gallery',
        icon: <Icon icon={roundPermMedia} width={20} height={20} />,
        component: <ProfileGallery gallery={gallery} />
      }
    ];
  
    return (
      <Page title="User: Profile | Minimal-UI">
        <Container>
          <HeaderBreadcrumbs
            heading="Profile"
            links={[
              { name: 'Dashboard', href: PATH_DASHBOARD.root },
              { name: 'User', href: PATH_DASHBOARD.user.root },
              { name: user.displayName }
            ]}
          />
          <Card
            sx={{
              mb: 3,
              height: 280,
              position: 'relative'
            }}
          >
            <ProfileCover myProfile={myProfile} />
  
            <TabsWrapperStyle>
              <Tabs
                value={currentTab}
                scrollButtons="auto"
                variant="scrollable"
                allowScrollButtonsMobile
                onChange={handleChangeTab}
              >
                {PROFILE_TABS.map((tab) => (
                  <Tab disableRipple key={tab.value} value={tab.value} icon={tab.icon} label={capitalCase(tab.value)} />
                ))}
              </Tabs>
            </TabsWrapperStyle>
          </Card>
  
          {PROFILE_TABS.map((tab) => {
            const isMatched = tab.value === currentTab;
            return isMatched && <Box key={tab.value}>{tab.component}</Box>;
          })}
        </Container>
      </Page>
    );
  }
  