import FusePageSimple from '@fuse/core/FusePageSimple';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import { PROPERTIES_LAYOUTS } from 'app/configs/consts';
import { selectUserFavorites, updateUserFavorites } from 'app/store/userSlice';
import clsx from 'clsx';
import { useCallback, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { usePropertiesHeader } from 'src/app/hooks';
import PropertiesHeader from '../shared-components/PropertiesHeader';
import PropertyGridCard from '../shared-components/PropertyGridCard';
import PropertyListItem from '../shared-components/PropertyListItem';

const Root = styled(FusePageSimple)(({ theme }) => ({
  '& .FusePageSimple-header': {
    backgroundColor: theme.palette.background.paper,
    borderBottomWidth: 1,
    borderStyle: 'solid',
    borderColor: theme.palette.divider,
  },
  '& .FusePageSimple-toolbar': {},
  '& .FusePageSimple-content': {},
  '& .FusePageSimple-sidebarHeader': {},
  '& .FusePageSimple-sidebarContent': {},
}));

function FavoritesPage() {
  const dispatch = useDispatch();
  const items = useSelector(selectUserFavorites);

  const { categories, activeCategory, onCategory, layouts, activeLayout, onLayout, onItemDelete } =
    usePropertiesHeader(items);

  const onFavorite = useCallback(
    (id) => {
      const targetItem = items.find((item) => item.id === id);
      if (!targetItem) {
        return;
      }

      onItemDelete(targetItem?.category);
      dispatch(updateUserFavorites(targetItem)).catch((error) => console.log(error));
    },
    [items, onItemDelete, dispatch]
  );

  const renderedItems = useMemo(
    () =>
      items.map((item, idx) => {
        if (activeCategory !== 'all' && item.category !== activeCategory) {
          return;
        }

        // eslint-disable-next-line consistent-return
        return activeLayout === PROPERTIES_LAYOUTS.list ? (
          <PropertyListItem
            {...item}
            key={item.title + idx}
            onDelete={onFavorite}
            onFavorite={onFavorite}
          />
        ) : (
          <PropertyGridCard
            {...item}
            key={item.title + idx}
            onDelete={onFavorite}
            onFavorite={onFavorite}
          />
        );
      }),
    [items, activeCategory, activeLayout, onFavorite]
  );

  return (
    <Root
      content={
        <div className="w-full p-60">
          <Paper className="w-full h-320 mb-[30px] rounded-20 shadow-light" />
          <PropertiesHeader
            className="mb-40"
            categories={categories}
            layouts={layouts}
            onCategory={onCategory}
            onLayout={onLayout}
          />
          <div
            className={clsx(
              'w-full flex flex-wrap justify-center gap-28',
              activeLayout === PROPERTIES_LAYOUTS.list && 'flex-col'
            )}
          >
            {renderedItems}
          </div>
        </div>
      }
      scroll="content"
    />
  );
}

export default FavoritesPage;
