/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable no-nested-ternary */
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import ms from 'ms';
import { isValid } from '@arcblock/did';
import Dialog from '@arcblock/ux/lib/Dialog';
import Spinner from '@mui/material/CircularProgress';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton';
import MenuItem from '@mui/material/MenuItem';
import TextField from '@mui/material/TextField';
import Tooltip from '@mui/material/Tooltip';
import InputLabel from '@mui/material/InputLabel';
import OutlinedInput from '@mui/material/OutlinedInput';
import FormHelperText from '@mui/material/FormHelperText';
import InputAdornment from '@mui/material/InputAdornment';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Typography from '@mui/material/Typography';
import { MAIN_CHAIN_ENDPOINT } from '@abtnode/constant';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Button from '@arcblock/ux/lib/Button';
import useSetState from 'react-use/lib/useSetState';
import Toast from '@arcblock/ux/lib/Toast';
import { useNodeContext } from '../../contexts/node';
import { useTeamContext } from '../../contexts/team';
import { sleep, formatError } from '../../util';
import getChainClient from '../../chain';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function TrustedFactory({
  onCancel,
  onSuccess,
  data = {},
  trustedFactories = []
}) {
  const {
    api
  } = useNodeContext();
  const {
    roles,
    teamDid
  } = useTeamContext();
  const {
    t
  } = useLocaleContext();
  const [state, setState] = useSetState({
    loading: false,
    fetching: false,
    fetched: [],
    errored: [],
    factoryAddress: data.factoryAddress || '',
    remark: data.remark || '',
    role: data.passport?.role || 'member',
    ttlPolicy: data.passport?.ttlPolicy || 'never',
    // eslint-disable-next-line no-unsafe-optional-chaining
    ttl: ms(+data.passport?.ttl || 365 * 24 * 60 * 60 * 1000),
    error: ''
  });
  const editIndex = trustedFactories.findIndex(x => x.factoryAddress === data.factoryAddress);
  const configTrustedFactories = async () => {
    if (state.loading) {
      return;
    }
    const {
      factoryAddress,
      remark,
      role,
      ttlPolicy,
      ttl
    } = state;
    const item = {
      factoryAddress,
      remark,
      passport: {
        role,
        ttlPolicy,
        ttl: ttlPolicy === 'never' ? 0 : ms(ttl)
      }
    };
    const trustedList = [...trustedFactories];
    if (editIndex === -1) {
      trustedList.unshift(item);
    } else {
      trustedList[editIndex] = item;
    }
    try {
      setState({
        loading: true
      });
      await api.configTrustedFactories({
        input: {
          teamDid,
          trustedFactories: trustedList
        }
      });
      await sleep(800);
      Toast.success(t('common.saveSuccess'));
      onSuccess();
    } catch (err) {
      console.error(err);
      Toast.error(formatError(err));
    } finally {
      setState({
        loading: false
      });
    }
  };
  useEffect(() => {
    const fetched = state.fetched.find(x => x.address === state.factoryAddress);
    const errored = state.errored.find(x => x.address === state.factoryAddress);
    if (isValid(state.factoryAddress) && !state.fetching && !fetched && !errored) {
      setState({
        fetching: true
      });
      const client = getChainClient(MAIN_CHAIN_ENDPOINT);
      client.getFactoryState({
        address: state.factoryAddress
      }).then(res => {
        if (res.state) {
          setState({
            fetching: false,
            fetched: [...state.fetched.filter(x => x.address !== state.factoryAddress), res.state],
            remark: res.state.name
          });
        } else {
          setState({
            fetching: false,
            errored: [...state.errored.filter(x => x.address !== state.factoryAddress), {
              address: state.factoryAddress
            }],
            error: t('team.passport.factory404', state)
          });
        }
      }).catch(err => {
        console.error(err);
        setState({
          fetching: false,
          error: formatError(err)
        });
      });
    }
  }, [state.factoryAddress, state.fetching]);
  let tip = state.error;
  const errored = state.factoryAddress ? state.errored.find(x => x.address === state.factoryAddress) : null;
  if (!tip && errored) {
    tip = t('team.passport.factory404', state);
  }
  const fetched = state.factoryAddress ? state.fetched.find(x => x.address === state.factoryAddress) : null;
  if (!tip && fetched) {
    tip = fetched.description;
  }
  if (!tip) {
    tip = t('team.passport.factoryAddressTip');
  }
  return /*#__PURE__*/_jsx(Dialog, {
    title: t('team.passport.trustedFactories'),
    open: true,
    showCloseButton: false,
    PaperProps: {
      style: {
        minHeight: '80vh'
      }
    },
    fullWidth: true,
    prepend: /*#__PURE__*/_jsx(IconButton, {
      onClick: onCancel,
      "data-cy": "close-trusted-factory",
      size: "large",
      children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
    }),
    actions: /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(Button, {
        onClick: onCancel,
        color: "inherit",
        children: t('common.cancel')
      }), /*#__PURE__*/_jsxs(Button, {
        onClick: () => configTrustedFactories(),
        color: "primary",
        disabled: !state.factoryAddress || !state.remark || !state.role || state.loading || state.error || errored,
        variant: "contained",
        autoFocus: true,
        "data-cy": "save-trusted-factory",
        children: [state.loading && /*#__PURE__*/_jsx(Spinner, {
          size: 16
        }), t('common.save')]
      })]
    }),
    children: /*#__PURE__*/_jsx(Div, {
      children: /*#__PURE__*/_jsxs("div", {
        className: "dialog-content",
        children: [/*#__PURE__*/_jsx(TextField, {
          fullWidth: true,
          error: !!state.error || !!errored,
          "data-cy": "input-factory-address",
          label: t('team.passport.factoryAddress'),
          helperText: tip,
          value: state.factoryAddress,
          onChange: e => {
            setState({
              factoryAddress: e.target.value,
              error: ''
            });
          },
          slotProps: {
            input: {
              endAdornment: state.fetching ? /*#__PURE__*/_jsx(InputAdornment, {
                position: "end",
                children: /*#__PURE__*/_jsx(Spinner, {
                  size: 16
                })
              }) : null
            }
          }
        }), /*#__PURE__*/_jsx(TextField, {
          style: {
            marginTop: 32
          },
          fullWidth: true,
          "data-cy": "input-factory-remark",
          label: t('common.remark'),
          value: state.remark,
          onChange: e => {
            setState({
              remark: e.target.value
            });
          }
        }), /*#__PURE__*/_jsx(TextField, {
          style: {
            marginTop: 32
          },
          fullWidth: true,
          "data-cy": "input-passport-role",
          label: t('team.passport.role'),
          select: true,
          value: state.role,
          onChange: e => {
            setState({
              role: e.target.value
            });
          },
          variant: "outlined",
          children: roles.filter(d => d.name !== 'owner').map(r => /*#__PURE__*/_jsx(MenuItem, {
            value: r.name,
            "data-cy": `passport-role-select-option-${r.name}`,
            children: /*#__PURE__*/_jsx("span", {
              children: r.title || r.name
            })
          }, r.name))
        }), /*#__PURE__*/_jsxs("div", {
          style: {
            marginTop: 32
          },
          children: [/*#__PURE__*/_jsx(InputLabel, {
            children: t('team.passport.ttl')
          }), /*#__PURE__*/_jsxs(ToggleButtonGroup, {
            color: "primary",
            size: "small",
            value: state.ttlPolicy,
            exclusive: true,
            style: {
              marginTop: 16
            },
            onChange: (e, value) => setState({
              ttlPolicy: value
            }),
            "data-cy": "input-passport-ttl-since",
            "aria-label": "Expire Policy",
            children: [/*#__PURE__*/_jsx(ToggleButton, {
              value: "never",
              "data-cy": "input-passport-ttl-never",
              children: /*#__PURE__*/_jsx(Tooltip, {
                title: t('team.passport.ttlNeverTip'),
                children: /*#__PURE__*/_jsx(Typography, {
                  children: t('team.passport.ttlNever')
                })
              })
            }), /*#__PURE__*/_jsx(ToggleButton, {
              value: "mint",
              "data-cy": "input-passport-ttl-mint",
              children: /*#__PURE__*/_jsx(Tooltip, {
                title: t('team.passport.ttlMintTip'),
                children: /*#__PURE__*/_jsx(Typography, {
                  children: t('team.passport.ttlMint')
                })
              })
            }), /*#__PURE__*/_jsx(ToggleButton, {
              value: "exchange",
              "data-cy": "input-passport-ttl-exchange",
              children: /*#__PURE__*/_jsx(Tooltip, {
                title: t('team.passport.ttlExchangeTip'),
                children: /*#__PURE__*/_jsx(Typography, {
                  children: t('team.passport.ttlExchange')
                })
              })
            })]
          }), state.ttlPolicy !== 'never' && /*#__PURE__*/_jsxs(_Fragment, {
            children: [/*#__PURE__*/_jsx(OutlinedInput, {
              fullWidth: true,
              type: "text",
              style: {
                marginTop: 16
              },
              "data-cy": "input-passport-ttl",
              value: state.ttl,
              onChange: e => {
                setState({
                  ttl: e.target.value
                });
              }
            }), /*#__PURE__*/_jsx(FormHelperText, {
              children: t('team.passport.ttlTip')
            })]
          })]
        })]
      })
    })
  });
}
TrustedFactory.propTypes = {
  onCancel: PropTypes.func.isRequired,
  onSuccess: PropTypes.func.isRequired,
  trustedFactories: PropTypes.array,
  data: PropTypes.object
};
const Div = styled.div`
  .dialog-h1 {
    font-size: 18px;
  }

  .list {
    .MuiIconButton-root {
      svg {
        fill: #bfbfbf;
      }
    }
  }
`;