/* eslint-disable react/require-default-props */
import { Box, Checkbox, FormControl, FormControlLabel, FormGroup, Switch, TextField, Tooltip } from '@mui/material';
import { Fragment } from 'react';
import { Icon } from '@iconify/react';
import iconHelpOutlineRounded from '@iconify-icons/material-symbols/help-outline-rounded';
import PropTypes from 'prop-types';
import omitBy from 'lodash/omitBy';
import isUndefined from 'lodash/isUndefined';
import { useMount } from 'ahooks';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export default function BlockletSecurityCORS({
  config = {},
  onChange = () => {},
  disabled = false
}) {
  const methodList = ['GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'];
  const mergedConfig = {
    origin: {
      override: false,
      value: '*',
      smart: true
    },
    methods: {
      override: false,
      value: [...methodList]
    },
    allowedHeaders: {
      override: false,
      value: '*'
    },
    exposedHeaders: {
      override: false,
      value: '*'
    },
    maxAge: {
      override: false,
      value: undefined
    },
    optionsSuccessStatus: {
      override: false,
      value: 204
    },
    preflightContinue: {
      override: false,
      value: false
    },
    credentials: {
      override: false,
      value: false
    },
    ...omitBy(config, isUndefined)
  };
  const {
    t
  } = useLocaleContext();
  const onPatchChange = (key, {
    override,
    value,
    smart
  }) => {
    const configItem = {
      ...mergedConfig?.[key]
    };
    if (!isUndefined(smart) && key === 'origin') {
      configItem.smart = smart;
    }
    if (!isUndefined(override)) {
      configItem.override = override;
    }
    if (!isUndefined(value)) {
      configItem.value = value;
    }
    onChange({
      ...mergedConfig,
      [key]: configItem
    });
  };
  const configList = [{
    title: t('responseHeaderPolicy.form.cors.origin'),
    override: mergedConfig.origin.override,
    smart: mergedConfig.origin.smart,
    name: 'origin',
    required: true,
    value: mergedConfig.origin.value,
    content: /*#__PURE__*/_jsx(FormControl, {
      fullWidth: true,
      sx: {
        mt: 0.75,
        '& .MuiFormHelperText-root': {
          mx: 0
        }
      },
      children: /*#__PURE__*/_jsx(TextField, {
        multiline: true,
        minRows: 4,
        maxRows: 10,
        disabled: disabled,
        variant: "outlined",
        size: "small",
        placeholder: t('responseHeaderPolicy.form.cors.originPlaceholder'),
        helperText: t('responseHeaderPolicy.form.cors.originHelperText'),
        value: mergedConfig.origin.value,
        onChange: e => {
          onPatchChange('origin', {
            value: e.target.value
          });
        }
      })
    })
  }, {
    title: t('responseHeaderPolicy.form.cors.methods'),
    name: 'methods',
    override: mergedConfig.methods.override,
    required: true,
    value: mergedConfig.methods.value,
    content: /*#__PURE__*/_jsx(FormGroup, {
      sx: {
        flexDirection: 'row'
      },
      children: methodList.map(method => /*#__PURE__*/_jsx(FormControlLabel, {
        control: /*#__PURE__*/_jsx(Checkbox, {
          size: "small",
          disabled: disabled,
          checked: mergedConfig.methods.value.includes(method),
          onChange: (e, value) => {
            onPatchChange('methods', {
              value: value ? [...mergedConfig.methods.value, method] : mergedConfig.methods.value.filter(x => x !== method)
            });
          }
        }),
        label: method
      }, method))
    })
  }, {
    title: t('responseHeaderPolicy.form.cors.allowedHeaders'),
    override: mergedConfig.allowedHeaders.override,
    name: 'allowedHeaders',
    value: mergedConfig.allowedHeaders.value,
    content: /*#__PURE__*/_jsx(FormControl, {
      fullWidth: true,
      sx: {
        mt: 0.75,
        '& .MuiFormHelperText-root': {
          mx: 0
        }
      },
      children: /*#__PURE__*/_jsx(TextField, {
        multiline: true,
        minRows: 3,
        maxRows: 7,
        disabled: disabled,
        variant: "outlined",
        size: "small",
        placeholder: t('responseHeaderPolicy.form.cors.allowedHeadersPlaceholder'),
        helperText: t('responseHeaderPolicy.form.cors.allowedHeadersHelperText'),
        value: mergedConfig.allowedHeaders.value,
        onChange: e => {
          onPatchChange('allowedHeaders', {
            value: e.target.value
          });
        }
      })
    })
  }, {
    title: t('responseHeaderPolicy.form.cors.exposedHeaders'),
    override: mergedConfig.exposedHeaders.override,
    name: 'exposedHeaders',
    value: mergedConfig.exposedHeaders.value,
    content: /*#__PURE__*/_jsx(FormControl, {
      fullWidth: true,
      sx: {
        mt: 0.75,
        '& .MuiFormHelperText-root': {
          mx: 0
        }
      },
      children: /*#__PURE__*/_jsx(TextField, {
        multiline: true,
        minRows: 3,
        maxRows: 7,
        disabled: disabled,
        variant: "outlined",
        size: "small",
        placeholder: t('responseHeaderPolicy.form.cors.exposedHeadersPlaceholder'),
        helperText: t('responseHeaderPolicy.form.cors.exposedHeadersHelperText'),
        value: mergedConfig.exposedHeaders.value,
        onChange: e => {
          onPatchChange('exposedHeaders', {
            value: e.target.value
          });
        }
      })
    })
  }, {
    title: t('responseHeaderPolicy.form.cors.maxAge'),
    override: mergedConfig.maxAge.override,
    name: 'maxAge',
    value: mergedConfig.maxAge.value,
    content: /*#__PURE__*/_jsx(FormControl, {
      fullWidth: true,
      sx: {
        mt: 0.75,
        '& .MuiFormHelperText-root': {
          mx: 0
        }
      },
      children: /*#__PURE__*/_jsx(TextField, {
        type: "number",
        variant: "outlined",
        size: "small",
        disabled: disabled,
        value: mergedConfig.maxAge.value,
        onChange: e => {
          onPatchChange('maxAge', {
            value: e.target.value
          });
        },
        helperText: t('responseHeaderPolicy.form.cors.maxAgeHelperText')
      })
    })
  }, {
    title: t('responseHeaderPolicy.form.cors.optionsSuccessStatus'),
    override: mergedConfig.optionsSuccessStatus.override,
    name: 'optionsSuccessStatus',
    value: mergedConfig.optionsSuccessStatus.value,
    content: /*#__PURE__*/_jsx(FormControl, {
      fullWidth: true,
      sx: {
        mt: 0.75,
        '& .MuiFormHelperText-root': {
          mx: 0
        }
      },
      children: /*#__PURE__*/_jsx(TextField, {
        type: "number",
        variant: "outlined",
        size: "small",
        disabled: disabled,
        value: mergedConfig.optionsSuccessStatus.value,
        onChange: e => {
          onPatchChange('optionsSuccessStatus', {
            value: e.target.value
          });
        }
      })
    })
  }, {
    title: t('responseHeaderPolicy.form.cors.preflightContinue'),
    override: mergedConfig.preflightContinue.override,
    name: 'preflightContinue',
    value: mergedConfig.preflightContinue.value,
    control: /*#__PURE__*/_jsx(Switch, {
      size: "small",
      disabled: disabled,
      checked: mergedConfig.preflightContinue.value,
      onChange: (e, value) => {
        onPatchChange('preflightContinue', {
          value
        });
      }
    })
  }, {
    title: t('responseHeaderPolicy.form.cors.credentials'),
    override: mergedConfig.credentials.override,
    name: 'credentials',
    value: mergedConfig.credentials.value,
    control: /*#__PURE__*/_jsx(Switch, {
      size: "small",
      disabled: disabled,
      checked: mergedConfig.credentials.value,
      onChange: (e, value) => {
        onPatchChange('credentials', {
          value
        });
      }
    })
  }];
  useMount(() => {
    // NOTICE: 首次加载时，将默认的数据写回
    onChange(mergedConfig);
  });
  const checkboxStyle = {
    '.PrivateSwitchBase-input+svg': {
      fontSize: '1rem'
    },
    '.MuiCheckbox-sizeSmall': {
      p: 0.75
    },
    '.MuiFormControlLabel-label': {
      fontSize: '0.8rem'
    }
  };
  return /*#__PURE__*/_jsx(FormGroup, {
    children: configList.map((item, index) => {
      return /*#__PURE__*/_jsxs(Fragment, {
        children: [/*#__PURE__*/_jsxs(Box, {
          sx: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          },
          children: [/*#__PURE__*/_jsx(FormControlLabel, {
            sx: {
              mt: index === 0 ? 0 : 1
            },
            control: item.control || /*#__PURE__*/_jsx(Box, {
              sx: {
                pl: 1.35
              }
            }),
            label: item.title,
            required: item.required
          }, `${item.name}_form`), /*#__PURE__*/_jsxs(Box, {
            children: [item.name === 'origin' ? /*#__PURE__*/_jsx(FormControlLabel, {
              control: /*#__PURE__*/_jsx(Checkbox, {
                size: "small",
                checked: item.smart,
                color: "primary",
                disabled: disabled,
                onChange: () => {
                  onPatchChange(item.name, {
                    smart: !item.smart
                  });
                }
              }),
              label: /*#__PURE__*/_jsxs(_Fragment, {
                children: [t('responseHeaderPolicy.form.cors.smartMode'), /*#__PURE__*/_jsx(Tooltip, {
                  title: t('responseHeaderPolicy.form.cors.smartModeHelperText'),
                  children: /*#__PURE__*/_jsx(Box, {
                    component: Icon,
                    icon: iconHelpOutlineRounded,
                    sx: {
                      cursor: 'pointer',
                      color: 'grey',
                      ml: 0.5,
                      fontSize: '1.1em'
                    }
                  })
                })]
              }),
              sx: checkboxStyle
            }, `${item.name}_smart`) : null, /*#__PURE__*/_jsx(FormControlLabel, {
              control: /*#__PURE__*/_jsx(Checkbox, {
                size: "small",
                checked: item.override,
                color: "warning",
                disabled: disabled,
                onChange: () => {
                  onPatchChange(item.name, {
                    override: !item.override
                  });
                }
              }),
              label: /*#__PURE__*/_jsxs(_Fragment, {
                children: [t('responseHeaderPolicy.form.originOverride'), /*#__PURE__*/_jsx(Tooltip, {
                  title: t('responseHeaderPolicy.form.originOverrideHelperText'),
                  children: /*#__PURE__*/_jsx(Box, {
                    component: Icon,
                    icon: iconHelpOutlineRounded,
                    sx: {
                      cursor: 'pointer',
                      color: 'grey',
                      ml: 0.5,
                      fontSize: '1.1em'
                    }
                  })
                })]
              }),
              sx: {
                ...checkboxStyle,
                mr: 0
              }
            }, `${item.name}_override`)]
          })]
        }), item.content ? /*#__PURE__*/_jsx(Box, {
          sx: {
            ml: 3.5
          },
          children: item.content
        }, `${item.name}_content`) : null]
      }, item.name);
    })
  });
}
BlockletSecurityCORS.propTypes = {
  config: PropTypes.object,
  onChange: PropTypes.func,
  disabled: PropTypes.bool
};