import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { ROUTING_RULE_TYPES, ROUTING_RESPONSE_TYPES } from '@abtnode/constant';
import { BLOCKLET_INTERFACE_TYPE_WEB } from '@blocklet/constant';
import { findWebInterface, getDisplayName } from '@blocklet/meta/lib/util';
import { useBlockletContext } from '../../../contexts/blocklet';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const getComponents = blocklet => blocklet.children.filter(x => x.meta.interfaces.find(i => i.type === BLOCKLET_INTERFACE_TYPE_WEB));
export default function ConfigRoutingRule({
  params = {},
  setParams = () => {},
  setError = () => {},
  serviceTypes = [{
    name: 'Redirect',
    value: ROUTING_RULE_TYPES.REDIRECT
  }, {
    name: 'Default - User will see the 404 page',
    value: ROUTING_RULE_TYPES.NONE
  }, {
    name: 'Rewrite - Route traffic without redirect',
    value: ROUTING_RULE_TYPES.GENERAL_REWRITE
  }, {
    name: 'Response - Response with provided content',
    value: ROUTING_RULE_TYPES.DIRECT_RESPONSE
  }, {
    name: 'Component - Pass traffic to blocklet component',
    value: ROUTING_RULE_TYPES.COMPONENT
  }]
}) {
  const {
    t
  } = useLocaleContext();
  const {
    blocklet
  } = useBlockletContext();
  const teamDid = blocklet.meta.did;
  const components = getComponents(blocklet);
  const [pageGroups, setPageGroups] = useState([]);
  const redirectCodesMap = {
    301: t('common.redirectPermanently'),
    302: t('common.redirectTemporary'),
    307: t('common.redirectTemporary'),
    308: t('common.redirectPermanently')
  };
  useEffect(() => {
    if (params.type === ROUTING_RULE_TYPES.COMPONENT && params.componentId) {
      const component = components.find(x => x.meta.did === params.componentId);
      const webInterface = findWebInterface(component.meta);
      const groups = (Array.isArray(webInterface?.pageGroups) ? webInterface.pageGroups : []).map(x => ({
        value: x,
        label: `${x} pages`
      }));
      if (groups.length) {
        groups.unshift({
          value: '',
          label: 'All pages'
        });
      }
      setPageGroups(groups);
      if (params.pageGroup && groups.find(x => x.value === params.pageGroup) === false) {
        setParams({
          ...params,
          pageGroups: ''
        });
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [params.componentId, params.type]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(TextField, {
      select: true,
      label: t('router.domain.add.type'),
      autoComplete: "off",
      variant: "outlined",
      name: "type",
      "data-cy": "domain-add-type",
      fullWidth: true,
      value: params.type,
      onChange: e => {
        setError('');
        setParams({
          ...params,
          type: e.target.value,
          did: e.target.value === ROUTING_RULE_TYPES.BLOCKLET ? teamDid : '',
          __disableConfirm: false
        });
      },
      style: {
        marginBottom: 32
      },
      slotProps: {
        select: {}
      },
      children: serviceTypes.map(({
        name,
        value
      }) => /*#__PURE__*/_jsx(MenuItem, {
        value: value,
        children: name
      }, value))
    }), params.type === ROUTING_RULE_TYPES.REDIRECT && [/*#__PURE__*/_jsx(TextField, {
      select: true,
      label: t('router.domain.add.redirect'),
      autoComplete: "off",
      variant: "outlined",
      name: "type",
      fullWidth: true,
      value: params.redirectCode,
      onChange: e => setParams({
        ...params,
        redirectCode: e.target.value
      }),
      style: {
        marginBottom: 32
      },
      slotProps: {
        select: {}
      },
      children: Object.keys(redirectCodesMap).map(code => /*#__PURE__*/_jsx(MenuItem, {
        value: code,
        children: `${redirectCodesMap[code]} - ${code}`
      }, code))
    }, "redirectCode"), /*#__PURE__*/_jsx(TextField, {
      label: t('common.redirectUrl'),
      autoComplete: "off",
      variant: "outlined",
      name: "url",
      fullWidth: true,
      value: params.url,
      helperText: t('router.urlHelperText'),
      style: {
        marginBottom: 32
      },
      onChange: e => {
        setParams({
          ...params,
          url: e.target.value,
          __disableConfirm: !e.target.value.trim()
        });
        if (!e.target.value.trim()) {
          setError(t('router.validation.redirectUrlRequired'));
        } else {
          setError('');
        }
      },
      slotProps: {
        htmlInput: {
          'data-cy': 'redirect-url-input'
        }
      }
    }, "redirectUrl")], params.type === ROUTING_RULE_TYPES.COMPONENT && [/*#__PURE__*/_jsx(TextField, {
      select: true,
      label: t('router.domain.add.component'),
      autoComplete: "off",
      variant: "outlined",
      "data-cy": "select-component-input",
      name: "componentId",
      fullWidth: true,
      value: params.componentId,
      onChange: e => {
        setParams({
          ...params,
          componentId: e.target.value
        });
      },
      style: {
        marginBottom: 32
      },
      slotProps: {
        select: {}
      },
      children: components.map(component => /*#__PURE__*/_jsx(MenuItem, {
        value: component.meta.did,
        selected: component.meta.did === params.componentId,
        children: getDisplayName(component, true)
      }, component.meta.did))
    }, "componentId"), pageGroups.length ? /*#__PURE__*/_jsx(TextField, {
      select: true,
      label: t('router.domain.add.pageGroup'),
      autoComplete: "off",
      variant: "outlined",
      name: "pageGroup",
      "data-cy": "route-group-input",
      fullWidth: true,
      value: params.pageGroup,
      helperText: t('router.domain.add.pageGroupTip'),
      style: {
        marginBottom: 32
      },
      onChange: e => {
        setParams({
          ...params,
          pageGroup: e.target.value
        });
      },
      slotProps: {
        select: {}
      },
      children: pageGroups.map(x => /*#__PURE__*/_jsx(MenuItem, {
        value: x.value,
        selected: x.value === params.pageGroup,
        children: x.label
      }, x.label))
    }, "pageGroup") : null].filter(Boolean), params.type === ROUTING_RULE_TYPES.GENERAL_REWRITE && /*#__PURE__*/_jsx(TextField, {
      label: t('common.rewriteUrl'),
      autoComplete: "off",
      variant: "outlined",
      name: "url",
      "data-cy": "rewrite-url-input",
      fullWidth: true,
      value: params.url,
      helperText: t('router.urlHelperText'),
      style: {
        marginBottom: 32
      },
      onChange: e => {
        const value = e.target.value.trim();
        setParams({
          ...params,
          url: e.target.value,
          __disableConfirm: !value
        });
        if (!value) {
          setError(t('router.validation.rewriteUrlRequired'));
        } else {
          setError('');
        }
      }
    }, "url"), params.type === ROUTING_RULE_TYPES.DIRECT_RESPONSE && [/*#__PURE__*/_jsx(TextField, {
      select: true,
      label: t('router.rule.add.responseType'),
      autoComplete: "off",
      variant: "outlined",
      name: "responseType",
      fullWidth: true,
      value: params.responseType,
      onChange: e => setParams({
        ...params,
        responseType: e.target.value
      }),
      style: {
        marginBottom: 32
      },
      slotProps: {
        select: {}
      },
      children: ROUTING_RESPONSE_TYPES.map(x => /*#__PURE__*/_jsx(MenuItem, {
        value: x.value,
        children: x.text
      }, x.value))
    }, "responseType"), /*#__PURE__*/_jsx(TextField, {
      label: t('router.rule.add.responseBody'),
      autoComplete: "off",
      variant: "outlined",
      name: "responseBody",
      "data-cy": "response-body-input",
      fullWidth: true,
      multiline: true,
      minRows: 3,
      value: params.responseBody,
      helperText: t('router.rule.add.responseBodyTip'),
      style: {
        marginBottom: 32
      },
      onChange: e => {
        const value = e.target.value.trim();
        setParams({
          ...params,
          responseBody: e.target.value,
          __disableConfirm: !value
        });
        if (!value) {
          setError(t('router.rule.add.responseBodyRequired'));
        } else {
          setError('');
        }
      }
    }, "response-body")]]
  });
}
ConfigRoutingRule.propTypes = {
  params: PropTypes.object,
  serviceTypes: PropTypes.array,
  setParams: PropTypes.func,
  setError: PropTypes.func
};