import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useReactive } from 'ahooks';
import noop from 'lodash/noop';
import Dialog from '@arcblock/ux/lib/Dialog';
import Spinner from '@mui/material/CircularProgress';
import DialogContentText from '@mui/material/DialogContentText';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import Alert from '@mui/material/Alert';
import Toast from '@arcblock/ux/lib/Toast';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Button from '@arcblock/ux/lib/Button';
import { useOrgsContext } from './context';
import { formatError } from '../../util';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function MutateOrgDialog({
  mode = 'create',
  item = {},
  onSuccess = noop,
  mutationParams = undefined
}) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const {
    t
  } = useLocaleContext();
  const ctx = useOrgsContext();
  const {
    requests,
    onCancelMutateOrg
  } = mutationParams || ctx;
  const form = useReactive({
    name: item.name || '',
    description: item.description || ''
  });
  const onSubmit = async () => {
    const _name = form.name.trim();
    if (!_name) {
      setError(t('team.orgs.validate.nameEmpty'));
      return;
    }
    if (_name.length > 20) {
      setError(t('team.orgs.validate.nameTooLong', {
        length: 20
      }));
      return;
    }
    const _description = form.description.trim();
    if (_description.length > 255) {
      setError(t('team.orgs.validate.descriptionTooLong', {
        length: 255
      }));
      return;
    }
    setError(null);
    setLoading(true);
    try {
      if (mode === 'create') {
        await requests.createOrg({
          name: _name,
          description: _description
        });
      } else {
        await requests.updateOrg({
          id: item.id,
          name: _name,
          description: _description
        });
      }
      onCancelMutateOrg();
      onSuccess();
    } catch (err) {
      console.error(err);
      const errMsg = formatError(err);
      setError(errMsg);
      Toast.error(formatError(error));
    } finally {
      setLoading(false);
    }
  };
  const body = /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsx(Typography, {
      component: "div",
      style: {
        marginTop: 16
      },
      children: /*#__PURE__*/_jsx(TextField, {
        label: t('team.orgs.mutate.name'),
        autoComplete: "off",
        variant: "outlined",
        name: "name",
        "data-cy": "mutate-org-input-name",
        fullWidth: true,
        autoFocus: true,
        value: form.name,
        onChange: e => {
          setError(null);
          form.name = e.target.value;
        },
        disabled: loading
      })
    }), /*#__PURE__*/_jsx(Typography, {
      component: "div",
      style: {
        marginTop: 16,
        marginBottom: 16
      },
      children: /*#__PURE__*/_jsx(TextField, {
        label: t('common.description'),
        autoComplete: "off",
        variant: "outlined",
        name: "description",
        "data-cy": "mutate-org-input-description",
        fullWidth: true,
        value: form.description,
        onChange: e => {
          setError(null);
          form.description = e.target.value;
        },
        disabled: loading,
        multiline: true,
        rows: 3
      })
    })]
  });
  return /*#__PURE__*/_jsxs(Dialog, {
    title: t('team.orgs.mutate.title', {
      mode: mode === 'create' ? t('common.create') : t('common.update')
    }),
    fullWidth: true,
    open: true,
    onClose: onCancelMutateOrg,
    showCloseButton: false,
    actions: /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(Button, {
        onClick: onCancelMutateOrg,
        color: "inherit",
        children: t('common.cancel')
      }), /*#__PURE__*/_jsxs(Button, {
        "data-cy": "mutate-org-confirm",
        onClick: onSubmit,
        color: "primary",
        disabled: loading,
        variant: "contained",
        autoFocus: true,
        children: [loading && /*#__PURE__*/_jsx(Spinner, {
          size: 16
        }), mode === 'create' ? t('common.create') : t('common.update')]
      })]
    }),
    children: [/*#__PURE__*/_jsx(DialogContentText, {
      component: "div",
      children: body
    }), !!error && /*#__PURE__*/_jsx(Alert, {
      severity: "error",
      style: {
        width: '100%',
        margin: 0
      },
      children: error
    })]
  });
}
MutateOrgDialog.propTypes = {
  mode: PropTypes.oneOf(['create', 'update']),
  item: PropTypes.object,
  onSuccess: PropTypes.func,
  mutationParams: PropTypes.object
};