import { useMemo } from 'react';
import InfoRow from '@arcblock/ux/lib/InfoRow';
import get from 'lodash/get';
import { useNavigate } from 'react-router-dom';
import { Box, Typography, Button } from '@mui/material';
import { InfoOutlined, Delete as DeleteIcon } from '@mui/icons-material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { useMemoizedFn } from 'ahooks';
import pick from 'lodash/pick';
import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
import { useOrgsContext } from '../context';
import Tooltip from '../../../tooltip';
import FormTextInput from '../../../form/form-text-input';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function OrgSettings() {
  const {
    orgDetail,
    requests
  } = useOrgsContext();
  const {
    org,
    loading,
    editable
  } = orgDetail || {};
  const {
    t,
    locale
  } = useLocaleContext();
  const navigate = useNavigate();
  const maxMembersPreOrg = useMemo(() => {
    const {
      settings = {}
    } = window.blocklet || {};
    return get(settings, 'org.maxMemberPerOrg', 100);
  }, []);
  const onUpdateOrg = useMemoizedFn(async (field, value) => {
    const newOrg = {
      ...pick(org, ['id', 'name', 'description']),
      [field]: value
    };
    await requests.updateOrg(newOrg);
    orgDetail.refresh(newOrg.id);
  });
  const handleRemoveOrg = useMemoizedFn(async () => {
    await requests.deleteOrg(org);
    navigate(`${WELLKNOWN_SERVICE_PATH_PREFIX}/user/orgs?locale=${locale}`);
  });
  return /*#__PURE__*/_jsxs(Box, {
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'grid',
        gridTemplateColumns: '1fr',
        gap: 2
      },
      children: [/*#__PURE__*/_jsx(InfoRow, {
        valueComponent: "div",
        nameWidth: 180,
        name: t('team.orgs.mutate.name'),
        children: editable ? /*#__PURE__*/_jsx(FormTextInput, {
          style: {
            marginTop: 0
          },
          disabled: loading,
          loading: loading,
          initialValue: org.name,
          onSubmit: value => onUpdateOrg('name', value)
        }) : org.name
      }, org.name), /*#__PURE__*/_jsx(InfoRow, {
        valueComponent: "div",
        nameWidth: 180,
        name: t('common.description'),
        children: editable ? /*#__PURE__*/_jsx(FormTextInput, {
          style: {
            marginTop: 0
          },
          disabled: loading,
          loading: loading,
          initialValue: org.description,
          type: "textarea",
          rows: 3,
          onSubmit: value => onUpdateOrg('description', value)
        }) : org.description
      }, org.description), /*#__PURE__*/_jsx(InfoRow, {
        valueComponent: "div",
        nameWidth: 180,
        name: /*#__PURE__*/_jsxs(Typography, {
          sx: {
            display: 'flex',
            alignItems: 'center',
            gap: 0.5
          },
          children: [t('team.orgs.invite.maxMembers'), /*#__PURE__*/_jsx(Tooltip, {
            title: t('team.orgs.invite.maxMembersTip'),
            children: /*#__PURE__*/_jsx(InfoOutlined, {
              fontSize: "small",
              sx: {
                cursor: 'pointer',
                fontSize: 14
              }
            })
          })]
        }),
        children: maxMembersPreOrg
      }, org.id)]
    }), editable && /*#__PURE__*/_jsx(Box, {
      display: "flex",
      justifyContent: "flex-end",
      children: /*#__PURE__*/_jsx(Button, {
        variant: "contained",
        color: "error",
        size: "small",
        startIcon: /*#__PURE__*/_jsx(DeleteIcon, {
          style: {
            fontSize: 16
          }
        }),
        onClick: handleRemoveOrg,
        children: t('team.orgs.deleteOrg')
      })
    })]
  });
}