import { selectCommon } from '@/app/common';
import { useAppSelector } from '@/app/hooks';
import Settings from '@/components/settings';
import { Theme } from '@/enum';
import { LayoutProps } from '@/layout';
import { SettingOutlined } from '@ant-design/icons';
import { Image, Layout, Menu, Popover } from '@df/toco-ui';
import { useIntl } from 'react-intl';
import styles from './index.module.css';

const { Header, Content, Footer } = Layout;

const HeaderAndFooterLayout = (props: LayoutProps) => {
  const { children, onHeadMenuSelect } = props;
  const { headMenus, currentMenu, theme } = useAppSelector(selectCommon);
  const { headKey, sideKey = '' } = currentMenu;
  const intl = useIntl();

  return (
    <Layout>
      <Header className={styles.header}>
        <div className={styles.left}>
          <div className={styles.logo}>
            <Image
              preview={false}
              src={
                process.env.PUBLIC_URL +
                (theme === Theme.DEFAULT ? '/logo.png' : '/logo_dark.png')
              }
            />
          </div>
          <Menu
            className={styles.menu}
            mode="horizontal"
            items={headMenus}
            selectedKeys={[headKey, sideKey]}
            onSelect={onHeadMenuSelect}
          />
        </div>
        <div className={styles.right}>
          <Popover
            title={intl.formatMessage({ id: 'system_settings' })}
            content={<Settings />}
            trigger="hover"
          >
            <SettingOutlined className={styles.settings} />
          </Popover>
        </div>
      </Header>

      <Content className={styles.content}>
        <div className={styles.main}>{children}</div>
      </Content>
      <Footer className={styles.footer}>
        TOCO Design ©{new Date().getFullYear()}
      </Footer>
    </Layout>
  );
};

export default HeaderAndFooterLayout;