Taobin-Recipe-Manager/client-electron/src/pages/recipes/components/recipe-editor-components/recipe-editor.tsx

import { Input } from '@/components/ui/input'
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
import { Separator } from '@/components/ui/separator'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { TooltipProvider } from '@/components/ui/tooltip'
import { cn } from '@/lib/utils'
import { type MaterialSetting, type Recipe01, type Recipes } from '@/models/recipe/schema'
import { memo, useEffect, useMemo, useState } from 'react'
import { Search, CupSoda, Wheat, Dessert, Cherry, WineOff, Server, Loader2 } from 'lucide-react'
import Nav from './nav'
import RecipeList from './recipe-list'
import { format, isBefore, isToday } from 'date-fns'
import RecipeDisplay from './recipe-display'
import MaterialList from './material-list'
import { Button } from '@/components/ui/button'
import { useMutation } from '@tanstack/react-query'
import taoAxios from '@/lib/taoAxios'

interface RecipeMenuProps {
  recipes: Recipes
  recipe01: Recipe01[]
  defaultSize?: number
  isDevBranch: boolean
}
const RecipeMenu: React.FC<RecipeMenuProps> = memo(({ recipes, recipe01, defaultSize, isDevBranch }) => {
  const [recipeList, setRecipeList] = useState<Recipe01[]>(recipe01)

  const sortedRecipe01 = useMemo(() => {
    return recipeList.sort((a, b) => (a.LastChange && b.LastChange && isBefore(a.LastChange, b.LastChange) ? 1 : -1))
  }, [recipeList])

  const { isPending, isSuccess, isError, mutate } = useMutation({
    mutationFn: async () => {
      return taoAxios.post('/v2/recipes/', recipes, {
        params: {
          country_id: 'tha'
        }
      })
    }
  })

  const [search, setSearch] = useState('')

  useEffect(() => {
    if (search) {
      const recipesFiltered = recipe01.filter(
        item =>
          item.productCode.toLowerCase().includes(search.toLowerCase()) ||
          (item.name && item.name.toLowerCase().includes(search.toLowerCase()))
      )
      setRecipeList(recipesFiltered)
    } else {
      setRecipeList(recipe01)
    }
  }, [search])

  return (
    <>
      <ResizablePanel id="recipe-panel" defaultSize={defaultSize} minSize={30}>
        <Tabs defaultValue="all">
          <div className="flex items-center px-4 py-2">
            <h1 className="text-xl font-bold">
              Recipe Version: {recipes.MachineSetting.configNumber} {isDevBranch ? '(Dev)' : ''}
            </h1>
            <TabsList className="ml-auto">
              <TabsTrigger value="all" className="text-zinc-600 dark:text-zinc-200">
                All Menu
              </TabsTrigger>
              <TabsTrigger value="today" className="text-zinc-600 dark:text-zinc-200">
                Today
              </TabsTrigger>
            </TabsList>
          </div>
          <Separator />
          <div className="bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
            <div className="pb-3 flex justify-end items-end">
              <Button className="bg-primary text-white" onClick={() => mutate()}>
                {isPending ? (
                  <div className="flex items-center gap-2">
                    <Loader2 size={20} className="animate-spin" />
                    <span>Updating...</span>
                  </div>
                ) : isSuccess ? (
                  'Updated'
                ) : isError ? (
                  'Error'
                ) : (
                  <div className="flex items-center gap-2">
                    <Server size={20} />
                    Up Recipe to Server
                  </div>
                )}
              </Button>
            </div>
            <form>
              <div className="relative">
                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input placeholder="Search" className="pl-8" value={search} onChange={e => setSearch(e.target.value)} />
              </div>
            </form>
          </div>
          <TabsContent value="all" className="m-0">
            <RecipeList items={sortedRecipe01} />
          </TabsContent>
          <TabsContent value="today" className="m-0">
            <RecipeList items={sortedRecipe01.filter(item => item.LastChange && isToday(item.LastChange))} />
          </TabsContent>
        </Tabs>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={defaultSize}>
        <RecipeDisplay recipes={recipes} />
      </ResizablePanel>
    </>
  )
})

interface MaterialsProps {
  recipes: Recipes
  defaultSize?: number
  isDevBranch: boolean
}
const Materials: React.FC<MaterialsProps> = memo(({ recipes, defaultSize, isDevBranch }) => {
  const [materialSettingList, setMaterialSettingList] = useState<MaterialSetting[]>(recipes.MaterialSetting)

  const sortedMaterialSettingList = useMemo(() => {
    return materialSettingList.sort((a, b) => (a.id < b.id ? 1 : -1))
  }, [materialSettingList])

  const [search, setSearch] = useState('')

  useEffect(() => {
    if (search) {
      const materialSettingsFiltered = recipes.MaterialSetting.filter(
        item =>
          item.materialName.toLowerCase().includes(search.toLowerCase()) ||
          item.id.toString().includes(search.toLowerCase())
      )
      setMaterialSettingList(materialSettingsFiltered)
    } else {
      setMaterialSettingList(recipes.MaterialSetting)
    }
  }, [search])

  return (
    <>
      <ResizablePanel id="material-panel" defaultSize={defaultSize} minSize={30}>
        <div className="flex items-center px-4 py-2">
          <h1 className="text-xl font-bold">
            Recipe Version: {recipes.MachineSetting.configNumber} {isDevBranch ? '(Dev)' : ''}
          </h1>
        </div>
        <Separator />
        <div className="bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <form>
            <div className="relative">
              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input placeholder="Search" className="pl-8" value={search} onChange={e => setSearch(e.target.value)} />
            </div>
          </form>
        </div>
        <MaterialList items={sortedMaterialSettingList} />
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={defaultSize}>
        <RecipeDisplay recipes={recipes} />
      </ResizablePanel>
    </>
  )
})

interface RecipeEditorProps {
  isDevBranch: boolean
  recipes: Recipes
  defaultLayout: number[] | undefined
  defaultCollapsed?: boolean
  navCollapsedSize: number
}

export const RecipeEditor: React.FC<RecipeEditorProps> = ({
  recipes,
  isDevBranch,
  defaultLayout = [265, 440, 655],
  defaultCollapsed = false,
  navCollapsedSize
}) => {
  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed)

  const [showListIndex, setShowListIndex] = useState(0)

  const { recipesEnable, recipeDisable } = useMemo(() => {
    return {
      recipesEnable: recipes.Recipe01.filter(r => r.isUse),
      recipeDisable: recipes.Recipe01.filter(r => !r.isUse)
    }
  }, [recipes])

  return (
    <TooltipProvider delayDuration={0}>
      <ResizablePanelGroup
        direction="horizontal"
        onLayout={(sizes: number[]) => {
          document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`
        }}
        className="h-full max-h-[900px] items-stretch"
      >
        <ResizablePanel
          defaultSize={defaultLayout[0]}
          collapsedSize={navCollapsedSize}
          collapsible={true}
          minSize={15}
          maxSize={20}
          onCollapse={() => {
            setIsCollapsed(true)
            document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(true)}`
          }}
          onExpand={() => {
            setIsCollapsed(false)
            document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(false)}`
          }}
          className={cn(isCollapsed && 'min-w-[50px] transition-all duration-300 ease-in-out')}
        >
          <div className={cn('flex h-[52px] items-center justify-center', isCollapsed ? 'h-[52px]' : 'px-2')}>
            <span className={cn('text-muted-foreground text-xs ', isCollapsed && 'hidden')}>
              TimeStamp: {format(recipes.Timestamp, 'dd-MM-yyyy HH:mm:ss')}
            </span>
          </div>
          <Separator />
          <Nav
            isCollapsed={isCollapsed}
            showListIndex={showListIndex}
            setShowListIndex={setShowListIndex}
            links={[
              {
                index: 0,
                title: 'Menu (Enabled)',
                label: recipesEnable.length.toString(),
                icon: CupSoda
              },
              {
                index: 1,
                title: 'Menu (Disabled)',
                label: recipeDisable.length.toString(),
                icon: WineOff
              }
            ]}
          />
          <Separator />
          <Nav
            isCollapsed={isCollapsed}
            showListIndex={showListIndex}
            setShowListIndex={setShowListIndex}
            links={[
              {
                index: 2,
                title: 'Materials',
                label: recipes.MaterialSetting.length.toString(),
                icon: Wheat
              },
              {
                index: 3,
                title: 'ToppingsGroups',
                label: recipes.Topping.ToppingGroup.length.toString(),
                icon: Dessert
              },
              {
                index: 4,
                title: 'ToppingsList',
                label: recipes.Topping.ToppingList.length.toString(),
                icon: Cherry
              }
            ]}
          />
        </ResizablePanel>
        <ResizableHandle withHandle />
        {showListIndex === 0 ? (
          <RecipeMenu
            recipes={recipes}
            recipe01={recipesEnable}
            defaultSize={defaultLayout[1]}
            isDevBranch={isDevBranch}
          />
        ) : showListIndex === 1 ? (
          <RecipeMenu
            recipes={recipes}
            recipe01={recipeDisable}
            defaultSize={defaultLayout[1]}
            isDevBranch={isDevBranch}
          />
        ) : showListIndex === 2 ? (
          <Materials recipes={recipes} defaultSize={defaultLayout[1]} isDevBranch={isDevBranch} />
        ) : null}
      </ResizablePanelGroup>
    </TooltipProvider>
  )
}

export default RecipeEditor