import { Button, Dropdown, Layout, message, Switch} from 'antd';
import useConfigStore from '../../store/config';
import LogoIcon from "@src/assets/images/login/logo.svg?react";
import Icon from "@ant-design/icons";
import { logout } from "../../http/sso";
import { useNavigate } from 'react-router-dom';

const { Header } = Layout;

const Headerbar = (props: { colorBgContainer: string }) => {
	const navigate = useNavigate()
  const setAlgorithm = useConfigStore(state => state.setAlgorithm)

	const logoutHandle = async () => {
		await logout()
		message.success('已退出账号')
		// TODO: 退出后跳转登录页
		navigate('/login')
	}

  return (
    <Header title='票圈内容合作平台' className='bg-[#20214F] px-[0]'>
      <div className='text-[#9090a7] flex items-center justify-between h-full px-[20px] '>
        <div className='flex items-center gap-[12px]'>
          <Icon component={LogoIcon} className='text-[40px]' />
          <span className='text-lg font-bold'>票圈内容合作平台</span>
        </div>
        <div className='flex items-center gap-[10px] cursor-pointer'>
          <Switch checkedChildren="Light" unCheckedChildren="Dark" defaultChecked onChange={(checked) => setAlgorithm(checked ? 'default' : 'dark')} />
					<Dropdown trigger={['hover']} menu={{items: [{label: (<Button type="primary" onClick={logoutHandle}>退出账号</Button>), key: 'logout'}]}}>
						<view className='flex items-center gap-[10px]'>
							<view>Yujian Xue</view>
							<img src="https://avatars.githubusercontent.com/u/48818060?s=48&v=4" alt="avatar" style={{ width: 40, height: 40 }} />
						</view>
					</Dropdown>
        </div>
      </div>
    </Header>
  )
}

export default Headerbar