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 PropTypes from 'prop-types';
import LoginProviders from './providers';
import SessionSettings from './session-settings';
import FederatedLogin from './federated';
import useMobile from '../../hooks/use-mobile';
import DIDConnectSettings from './did-connect-settings';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function LabelWrapper({
  label
}) {
  return /*#__PURE__*/_jsx(Box, {
    sx: {
      textAlign: 'center',
      width: '100%'
    },
    children: label
  });
}
LabelWrapper.propTypes = {
  label: PropTypes.any.isRequired
};
function Authentication({
  orientation = 'horizontal'
}) {
  const {
    t
  } = useContext(LocaleContext);
  const isMobile = useMobile({
    key: 'lg'
  });
  const tabs = [{
    label: /*#__PURE__*/_jsx(LabelWrapper, {
      label: t('authentication.didConnectSettings')
    }),
    value: 'didConnect'
  }, {
    label: /*#__PURE__*/_jsx(LabelWrapper, {
      label: t('authentication.loginProviders')
    }),
    value: 'loginProviders'
  }, {
    label: /*#__PURE__*/_jsx(LabelWrapper, {
      label: t('authentication.federated')
    }),
    value: 'federated'
  }, {
    label: /*#__PURE__*/_jsx(LabelWrapper, {
      label: t('authentication.sessionSettings')
    }),
    value: 'session'
  }];
  const [currentTab, setCurrentTab] = useState(tabs[0].value);
  const contents = useCreation(() => ({
    didConnect: /*#__PURE__*/_jsx(DIDConnectSettings, {}),
    loginProviders: /*#__PURE__*/_jsx(LoginProviders, {}),
    federated: /*#__PURE__*/_jsx(FederatedLogin, {}),
    session: /*#__PURE__*/_jsx(SessionSettings, {})
  }), [t]);
  if (orientation === 'vertical') {
    return /*#__PURE__*/_jsx(Box, {
      sx: {
        '.MuiTab-root': {
          textAlign: 'left',
          alignItems: 'flex-start',
          fontWeight: 'normal',
          div: {
            textAlign: 'left'
          }
        },
        '.Mui-selected': {
          fontWeight: 'bold'
        }
      },
      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]
    })]
  });
}
Authentication.propTypes = {
  orientation: PropTypes.oneOf(['horizontal', 'vertical'])
};
export default Authentication;