import type React from 'react'
import { motion } from 'framer-motion'
import { useToggle } from 'ahooks'
import { Navbar } from '../Navbar'
import { HistoryBar } from '../HistoryBar/HistoryBar'
import styles from './MainLayout.module.less'

interface MainLayoutProps {
  children: React.ReactNode
}

export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
  const [isHistoryVisible, { toggle }] = useToggle()
  const contentVariants = {
    expanded: {
      width: '90px',
      transition: { type: 'spring', stiffness: 300, damping: 30 },
    },
    shrunk: {
      width: '340px',
      transition: { type: 'spring', stiffness: 300, damping: 30 },
    },
  }
  return (
    <motion.main className={styles.layoutMain}>
      <motion.div
        animate={isHistoryVisible ? 'shrunk' : 'expanded'}
        variants={contentVariants}
        className={`h-full pl-[12px] flex items-center ${isHistoryVisible ? 'w-[340px]' : 'w-[90px]'}`}
      >
        <Navbar isCollapsed={isHistoryVisible} onToggle={toggle} />
        <HistoryBar isVisible={isHistoryVisible} />
      </motion.div>
      <motion.div
        className={styles.layoutContent}
      >
        {children}
      </motion.div>
    </motion.main>
  )
}
