import useRouterStore from '@/useRouterStore'
import { Button, Modal, Tag } from 'ant-design-vue'
import { defineComponent } from 'vue'
import AvatarCircle from './AvatarCircle'
import useUserStore from './useUserStore'
import { EditOutlined, LoginOutlined, LogoutOutlined } from '@ant-design/icons-vue'
import { globalToast } from '@/main'
import clsx from 'clsx'
import useLayoutStore from '@/layout/useLayoutStore'

const labelStyle = 'w-16'

export default defineComponent(() => {
  const router = useRouterStore()
  const layout = useLayoutStore()
  const user = useUserStore()
  return () => (
    <div class="absolute left-0 top-0 w-full h-full p-4 flex flex-col">
      <div class="flex justify-center py-4">
        <div class="w-16 h-16 relative">
          <AvatarCircle />
        </div>
      </div>
      {user.isLogin && (
        <div
          class={clsx(
            'h-0 flex-grow py-4 px-12 ',
            layout.state.current === 0 ? 'text-white' : 'text-[#333]'
          )}
        >
          <div class="flex py-2">
            <div class={labelStyle}>用户名:</div>
            <div class="w-0 flex-grow overflow-hidden text-ellipsis whitespace-nowrap break-all">
              {user.profile.username}
            </div>
          </div>
          <div class="flex py-2">
            <div class={labelStyle}>生日:</div> {user.profile.birthday}
          </div>
          <div class="flex py-2">
            <div class={labelStyle}>性别:</div>
            <Tag color={user.profile.gender === 1 ? 'blue' : user.profile.gender === 2 ? 'red' : 'gray'}>
              {user.profile.gender === 1 ? '男' : user.profile.gender === 2 ? '女' : '未知'}
            </Tag>
          </div>
        </div>
      )
      }

      <div class="flex justify-around items-center my-10">
        {user.isLogin ? (
          <>
            <Button
              onClick={() => {
                router.go('global-login')
              }}
              icon={<EditOutlined />}
              type="primary"
            >
              修改个人信息
            </Button>
            <Button
              type="text"
              class={'text-[#999] hover:text-[#999]'}
              icon={<LogoutOutlined />}
              onClick={() => {
                Modal.confirm({
                  title: '退出登录',
                  content: '确定要退出登录吗？',
                  onOk: () => {
                    router.go('')
                    user.logout()
                    globalToast.success('已退出登录')
                  }
                })
              }}
            >
              退出登录
            </Button>
          </>
        ) : (
          <Button
            type="primary"
            icon={<LoginOutlined />}
            size="large"
            onClick={() => {
              router.go('global-login')
            }}
          >
            登录
          </Button>
        )}
      </div>
    </div >
  )
})