import PluginExtraField from '@/components/plugin-extra-fields';
import { logout } from '@/pages/login/apis';
import { useModel } from '@@/plugin-model';
import { DropdownActions, IconFont } from '@gpustack/core-ui';
import { history, useIntl, useNavigate } from '@umijs/max';
import { Avatar, Divider } from 'antd';
import { useMemo } from 'react';
import styled from 'styled-components';
import { DEFAULT_ENTER_PAGE } from '../config/settings';

const IconWrapper = styled.span`
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ant-color-text-secondary);
`;

const Wrapper = styled.div`
  display: flex;
  align-items: center;
  gap: 24px;
  height: 32px;
`;
const DropdownWrapper = styled.div`
  min-width: 160px;
  box-shadow: var(--ant-box-shadow-secondary);
  background-color: var(--ant-color-bg-elevated);
  border-radius: var(--ant-border-radius-lg);
  padding: var(--ant-padding-xs);
  .ant-dropdown-menu {
    padding: 0;
    box-shadow: none;
    background-color: transparent;
    border-radius: 0;
    a {
      color: var(--ant-color-text);
    }
  }
`;

const CustomItem = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  justify-content: flex-start;
  height: 32px;
  padding: 0 var(--ant-padding-xs);
  cursor: pointer;
  &.user-info {
    cursor: default;
    justify-content: space-between;
    .user-name {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      max-width: 100px;
    }
  }
  &:not(.user-info):hover {
    background-color: var(--ant-control-item-bg-hover);
  }
  background-color: var(--ant-color-bg-elevated);
`;

export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
  const { isDarkTheme } = props;
  const intl = useIntl();
  const initialInfo = useModel('@@initialState') || {
    initialState: undefined,
    loading: false,
    setInitialState: null
  };

  const { initialState } = initialInfo;

  const navigate = useNavigate();

  const loginPath = DEFAULT_ENTER_PAGE.login;

  const avatarStyle = useMemo(() => {
    if (isDarkTheme) {
      return {
        color: 'var(--ant-color-text)',
        border: 'none'
      };
    }
    return {};
  }, [isDarkTheme]);

  const handleLogout = async () => {
    await logout();
    navigate(loginPath);
  };

  const userMenu = {
    items: [
      {
        key: 'settings',
        label: (
          <span className="flex flex-center">
            <IconFont type="icon-settings-02" />
            <span className="m-l-8" style={{ marginLeft: 8 }}>
              {intl?.formatMessage?.({ id: 'common.button.settings' })}
            </span>
          </span>
        ),
        onClick: () => {
          history.push('/profile');
        }
      }
    ]
  };

  const userPopupRender = (originNode: React.ReactNode) => {
    return (
      <DropdownWrapper>
        <CustomItem className="user-info border-bottom">
          <span className="flex-center gap-8">
            <Avatar
              size={24}
              style={{ ...avatarStyle }}
              src={initialState?.currentUser?.avatar_url}
              icon={
                <IconFont type="icon-user-filled" className="font-size-24" />
              }
            />
            <span className="user-name">
              {initialState?.currentUser?.username}
            </span>
          </span>
        </CustomItem>
        <Divider style={{ marginBlock: 4 }} />
        {originNode}
        <Divider style={{ marginBlock: 4 }} />
        <CustomItem onClick={handleLogout} className="border-top">
          <IconFont type="icon-logout" style={{ fontSize: 17 }} />
          <span>{intl?.formatMessage?.({ id: 'common.button.logout' })}</span>
        </CustomItem>
      </DropdownWrapper>
    );
  };

  return (
    <Wrapper>
      <PluginExtraField name="OrgSwitcher" isDarkTheme={isDarkTheme} />
      <PluginExtraField name="GlobalSettings" />
      <DropdownActions menu={{ ...userMenu }} popupRender={userPopupRender}>
        <IconWrapper>
          <Avatar
            size={24}
            style={{ ...avatarStyle }}
            src={initialState?.currentUser?.avatar_url}
            icon={<IconFont type="icon-user-filled" className="font-size-24" />}
          />
        </IconWrapper>
      </DropdownActions>
    </Wrapper>
  );
};
