import { useContext, useMemo } from 'react';
import PropTypes from 'prop-types';
import { Box, Typography, Button, CircularProgress, Tooltip } from '@mui/material';
import { TaskAltOutlined, LinkOff, ErrorOutline } from '@mui/icons-material';
import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
import noop from 'lodash/noop';
import { CardWrapper } from './basic';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function Connected({
  url,
  providerName,
  disconnect = noop,
  disabled = false,
  loading = false,
  validationResult = ''
}) {
  const {
    t
  } = useContext(LocaleContext);
  const isVerifyFailed = useMemo(() => {
    return validationResult && validationResult !== 'success';
  }, [validationResult]);
  return /*#__PURE__*/_jsx(CardWrapper, {
    minHeight: 80,
    height: "none",
    children: /*#__PURE__*/_jsxs(Box, {
      sx: {
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'flex-start',
        alignItems: 'center',
        gap: 2
      },
      children: [isVerifyFailed ? /*#__PURE__*/_jsx(Tooltip, {
        title: validationResult,
        children: /*#__PURE__*/_jsx(ErrorOutline, {
          sx: {
            fontSize: 24,
            color: 'error.main',
            cursor: 'pointer',
            flexShrink: 0
          }
        })
      }) : /*#__PURE__*/_jsx(TaskAltOutlined, {
        sx: {
          fontSize: 24,
          color: 'success.main',
          cursor: 'pointer',
          flexShrink: 0
        }
      }), /*#__PURE__*/_jsxs(Box, {
        sx: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 1,
          flex: 1,
          flexWrap: 'wrap'
        },
        children: [/*#__PURE__*/_jsxs(Box, {
          children: [/*#__PURE__*/_jsx(Typography, {
            variant: "h5",
            sx: {
              fontSize: 18
            },
            children: isVerifyFailed ? t('setting.aigne.testFailed') : t('setting.aigne.connected', {
              provider: providerName
            })
          }), /*#__PURE__*/_jsxs(Typography, {
            variant: "body1",
            sx: {
              color: 'text.secondary',
              fontSize: 14
            },
            children: [t('setting.aigne.baseUrl', {
              provider: providerName
            }), ": ", url]
          })]
        }), /*#__PURE__*/_jsx(Button, {
          variant: "outlined",
          color: "error",
          startIcon: loading ? /*#__PURE__*/_jsx(CircularProgress, {
            size: 16,
            sx: {
              mr: 1
            }
          }) : /*#__PURE__*/_jsx(LinkOff, {}),
          onClick: disconnect,
          disabled: disabled || loading,
          sx: {
            lineHeight: 1.5
          },
          children: t('setting.aigne.disconnect')
        })]
      })]
    })
  });
}
Connected.propTypes = {
  url: PropTypes.string.isRequired,
  providerName: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
  disconnect: PropTypes.func,
  loading: PropTypes.bool,
  validationResult: PropTypes.string
};