import React from "react";
import {
Box,
Editable,
EditablePreview,
EditableInput,
Grid,
Icon,
IconButton,
Input,
InputGroup,
InputLeftElement,
InputRightElement,
PseudoBox,
Skeleton,
Stack,
useToast,
} from "@chakra-ui/core";
import { Delay, Heading1, Heading2 } from "./util";
import ItemList, { ItemListSkeleton } from "./ItemList";
import OutfitPreview from "./OutfitPreview";
import SearchPanel from "./SearchPanel";
import useOutfitState from "./useOutfitState.js";
function WardrobePage() {
const { loading, error, outfitState, dispatchToOutfit } = useOutfitState();
const [searchQuery, setSearchQuery] = React.useState("");
const toast = useToast();
React.useEffect(() => {
if (error) {
console.log(error);
toast({
title: "We couldn't load this outfit 😖",
description: "Please reload the page to try again. Sorry!",
status: "error",
isClosable: true,
duration: 999999999,
});
}
}, [error, toast]);
return (
{searchQuery ? (
) : (
)}
);
}
function SearchToolbar({ query, onChange }) {
return (
onChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Escape") {
onChange("");
e.target.blur();
}
}}
/>
{query && (
onChange("")}
/>
)}
);
}
function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
const { zonesAndItems, wornItemIds } = outfitState;
return (
{loading &&
[1, 2, 3].map((i) => (
))}
{!loading &&
zonesAndItems.map(({ zone, items }) => (
{zone.label}
i.id)
.filter((id) => wornItemIds.includes(id))}
dispatchToOutfit={dispatchToOutfit}
/>
))}
);
}
function OutfitHeading({ outfitState, dispatchToOutfit }) {
return (
dispatchToOutfit({ type: "rename", outfitName: value })
}
>
{({ isEditing, onRequestEdit }) => (
<>
{!isEditing && (
)}
>
)}
);
}
function OutfitNameEditButton({ onRequestEdit }) {
return (
);
}
export default WardrobePage;