import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
import Tabs from '@arcblock/ux/lib/Tabs';
import { Box, Typography } from '@mui/material';
import { useCreation } from 'ahooks';
import { useContext, useMemo, useState } from 'react';
import NotificationEmail from './email';
import NotificationPushKit from './push-kit';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const tabs = [{
  label: /*#__PURE__*/_jsx(Box, {
    sx: {
      textAlign: 'center',
      width: '100%'
    },
    children: "Email"
  }),
  value: 'email'
}, {
  label: /*#__PURE__*/_jsx(Box, {
    sx: {
      textAlign: 'center',
      width: '100%'
    },
    children: "Push Kit"
  }),
  value: 'pushKit'
}, {
  label: /*#__PURE__*/_jsx(Box, {
    sx: {
      textAlign: 'center',
      width: '100%'
    },
    children: "Wallet"
  }),
  value: 'wallet'
}, {
  label: /*#__PURE__*/_jsx(Box, {
    sx: {
      textAlign: 'center',
      width: '100%'
    },
    children: "Webhooks"
  }),
  value: 'webhooks'
}];
function BlockletNotification() {
  const [currentTab, setCurrentTab] = useState(tabs[0].value);
  const {
    t
  } = useContext(LocaleContext);
  const contents = useCreation(() => ({
    email: /*#__PURE__*/_jsx(NotificationEmail, {}),
    pushKit: /*#__PURE__*/_jsx(NotificationPushKit, {}),
    wallet: /*#__PURE__*/_jsx(Typography, {
      variant: "body1",
      children: t('notification.wallet.description')
    }),
    webhooks: /*#__PURE__*/_jsx(Typography, {
      variant: "body1",
      children: t('notification.webhooks.description')
    })
  }), [t]);
  const tabBodyStyle = useMemo(() => {
    return {
      padding: '10px 0'
    };
  }, []);
  return /*#__PURE__*/_jsxs(Box, {
    children: [/*#__PURE__*/_jsx(Tabs, {
      variant: "card",
      tabs: tabs,
      current: currentTab,
      onChange: setCurrentTab
    }), /*#__PURE__*/_jsx(Box, {
      style: tabBodyStyle,
      children: contents[currentTab]
    })]
  });
}
export default BlockletNotification;