import { LockOutlined, SafetyOutlined, UserOutlined } from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Grid, Menu } from 'antd';
import { MenuItemType } from 'antd/lib/menu/interface';
import { useState } from 'react';
import ChangePassword from './components/ChangePassword';
import ChangeProfile from './components/ChangeProfile';
import TwoFactorAuthentication from './components/TwoFactorAuthentication';

const ProfilePage = () => {
  const { useBreakpoint } = Grid;
  const intl = useIntl();
  const screens = useBreakpoint();
  const [keySelected, setKeySelected] = useState<string>('1');
  const items: MenuItemType[] = [
    {
      key: '1',
      icon: <UserOutlined />,
      label: intl.formatMessage({ id: 'master.profile.change-profile' }),
    },
    {
      key: '2',
      icon: <LockOutlined />,
      label: intl.formatMessage({ id: 'master.profile.change-password' }),
    },
    {
      key: '3',
      icon: <SafetyOutlined />,
      label: intl.formatMessage({
        id: 'master.profile.two-factor-authentication',
      }),
      // disabled: true,
    },
  ];
  const handleMenuSelect = (e: { key: string }) => {
    setKeySelected(e.key);
  };
  return (
    <>
      <ProCard split={screens.md ? 'vertical' : 'horizontal'}>
        <ProCard colSpan={{ xs: 24, sm: 24, md: 6, lg: 6, xl: 6 }}>
          <Menu
            mode={screens.md ? 'vertical' : 'horizontal'}
            items={items}
            selectedKeys={[keySelected]}
            onSelect={handleMenuSelect}
          />
        </ProCard>
        <ProCard colSpan={{ xs: 24, sm: 24, md: 18, lg: 18, xl: 18 }}>
          {keySelected === '1' && <ChangeProfile />}
          {keySelected === '2' && <ChangePassword />}
          {keySelected === '3' && <TwoFactorAuthentication />}
        </ProCard>
      </ProCard>
    </>
  );
};

export default ProfilePage;
