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 BlockletSecurity from '../security';
import BlockletAccessPolicy from '../security/access-policy';
import BlockletResponseHeaderPolicy from '../security/response-header-policy';
import useMobile from '../../hooks/use-mobile';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function Security() {
  const {
    t
  } = useContext(LocaleContext);
  const isMobile = useMobile({
    key: 'lg'
  });
  const tabs = [{
    label: /*#__PURE__*/_jsx(Box, {
      sx: {
        textAlign: 'center',
        width: '100%'
      },
      children: t('securityRule.title')
    }),
    value: 'security'
  }, {
    label: /*#__PURE__*/_jsx(Box, {
      sx: {
        textAlign: 'center',
        width: '100%'
      },
      children: t('accessPolicy.title')
    }),
    value: 'accessPolicy'
  }, {
    label: /*#__PURE__*/_jsx(Box, {
      sx: {
        textAlign: 'center',
        width: '100%'
      },
      children: t('responseHeaderPolicy.title')
    }),
    value: 'responseHeaderPolicy'
  }];
  const [currentTab, setCurrentTab] = useState(tabs[0].value);
  const contents = useCreation(() => ({
    security: /*#__PURE__*/_jsx(BlockletSecurity, {}),
    accessPolicy: /*#__PURE__*/_jsx(BlockletAccessPolicy, {}),
    responseHeaderPolicy: /*#__PURE__*/_jsx(BlockletResponseHeaderPolicy, {})
  }), [t]);
  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, {
          children: contents[currentTab]
        })
      })]
    })
  });
}
export default Security;
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;
  }
`;