import Empty from '@arcblock/ux/lib/Empty';
import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
import Tabs from '@arcblock/ux/lib/Tabs';
import { Box, Stack } from '@mui/material';
import { useCreation } from 'ahooks';
import { useContext, useState } from 'react';
import styled from '@emotion/styled';
import PropTypes from 'prop-types';
import OAuthLogin from './oauth';
import CommonSettings from './common-settings';
import FederatedLogin from './federated';
import useMobile from '../../hooks/use-mobile';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function OAuth({
  orientation = 'horizontal'
}) {
  const {
    t
  } = useContext(LocaleContext);
  const isMobile = useMobile({
    key: 'lg'
  });
  const tabs = [{
    label: /*#__PURE__*/_jsx(Box, {
      sx: {
        textAlign: 'center',
        width: '100%'
      },
      children: t('oauth.commonSettings')
    }),
    value: 'settings'
  }, {
    label: /*#__PURE__*/_jsx(Box, {
      sx: {
        textAlign: 'center',
        width: '100%'
      },
      children: t('oauth.federated')
    }),
    value: 'federated'
  }, {
    label: /*#__PURE__*/_jsx(Box, {
      sx: {
        textAlign: 'center',
        width: '100%'
      },
      children: t('oauth.oauth')
    }),
    value: 'oauth'
  }, {
    label: /*#__PURE__*/_jsx(Box, {
      sx: {
        textAlign: 'center',
        width: '100%'
      },
      children: t('oauth.moreLogin')
    }),
    value: 'more'
  }];
  const [currentTab, setCurrentTab] = useState(tabs[0].value);
  const contents = useCreation(() => ({
    oauth: /*#__PURE__*/_jsx(OAuthLogin, {}),
    federated: /*#__PURE__*/_jsx(FederatedLogin, {}),
    more: /*#__PURE__*/_jsx(Empty, {
      children: t('oauth.comingSoon')
    }),
    settings: /*#__PURE__*/_jsx(CommonSettings, {})
  }), [t]);
  if (orientation === 'vertical') {
    return /*#__PURE__*/_jsx(Div, {
      children: /*#__PURE__*/_jsxs(Stack, {
        direction: {
          md: 'column',
          lg: 'row'
        },
        sx: {
          gap: 2
        },
        children: [/*#__PURE__*/_jsx(Box, {
          sx: {
            minWidth: '240px',
            flexShrink: 0
          },
          children: /*#__PURE__*/_jsx(Tabs, {
            tabs: tabs,
            current: currentTab,
            orientation: isMobile ? 'horizontal' : 'vertical',
            onChange: setCurrentTab,
            sx: {
              borderRight: isMobile ? 0 : 1,
              height: '100%',
              borderColor: 'divider'
            }
          })
        }), /*#__PURE__*/_jsx(Box, {
          sx: {
            flexGrow: 1,
            minWidth: 0
          },
          children: /*#__PURE__*/_jsx(Box, {
            sx: {
              maxWidth: '1200px'
            },
            children: contents[currentTab]
          })
        })]
      })
    });
  }
  return /*#__PURE__*/_jsxs(Box, {
    children: [/*#__PURE__*/_jsx(Tabs, {
      tabs: tabs,
      current: currentTab,
      onChange: setCurrentTab
    }), /*#__PURE__*/_jsx(Box, {
      sx: {
        marginTop: '10px'
      },
      children: contents[currentTab]
    })]
  });
}
OAuth.propTypes = {
  orientation: PropTypes.oneOf(['horizontal', 'vertical'])
};
export default OAuth;
const Div = styled.div`
  .MuiTab-root {
    text-align: left;
    align-items: flex-start;
    font-weight: normal;

    div {
      text-align: left;
    }
  }

  .Mui-selected {
    font-weight: bold;
  }
`;