import { Box, IconButton, InputAdornment, MenuItem, Select, TextField, Typography } from '@mui/material';
import Dialog from '@arcblock/ux/lib/Dialog';
import IOSSwitch from '@arcblock/ux/lib/Switch';
import { Icon } from '@iconify/react';
import PropTypes from 'prop-types';
import { notAllowUseCustomDockerArgs, allowDockerArgs, dockerArgsValidator, dockerArgsToCamelCase } from '@abtnode/docker-utils';
import { useState } from 'react';
import { BLOCKLET_AUTOMATIC_ENV_VALUE } from '@blocklet/constant';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function ResourceDockerInputItem({
  index,
  item,
  dockerParams,
  setDockerParams,
  dataKey,
  t,
  readOnly
}) {
  const value = item?.value || '';
  const [showDialog, setShowDialog] = useState(false);
  const handleDelete = () => {
    dockerParams[dataKey]?.splice(index, 1);
    setDockerParams({
      ...dockerParams,
      [dataKey]: [...dockerParams[dataKey]]
    });
  };
  const handleSetCustom = (_, checked) => {
    if (dockerParams[dataKey]?.[index]) {
      if (!checked) {
        dockerParams[dataKey][index].value = dockerParams[dataKey][index].custom || '';
        dockerParams[dataKey][index].custom = '';
      } else {
        dockerParams[dataKey][index].custom = dockerParams[dataKey][index].value;
        dockerParams[dataKey][index].value = `$${dockerArgsToCamelCase(item.key)}`;
      }
    }
    setDockerParams({
      ...dockerParams,
      [dataKey]: [...dockerParams[dataKey]]
    });
  };
  const handleSetSecure = (_, v) => {
    const oldValue = dockerParams[dataKey][index]?.value || '';
    dockerParams[dataKey][index] = {
      ...dockerParams[dataKey][index],
      secure: v,
      value: v && oldValue === BLOCKLET_AUTOMATIC_ENV_VALUE ? '' : oldValue
    };
    setDockerParams({
      ...dockerParams,
      [dataKey]: [...dockerParams[dataKey]]
    });
  };
  const handleSetShared = (_, v) => {
    dockerParams[dataKey][index] = {
      ...dockerParams[dataKey][index],
      shared: v
    };
    setDockerParams({
      ...dockerParams,
      [dataKey]: [...dockerParams[dataKey]]
    });
  };
  const handleSetRequired = (_, v) => {
    const oldValue = dockerParams[dataKey][index]?.value || '';
    dockerParams[dataKey][index] = {
      ...dockerParams[dataKey][index],
      required: v,
      value: v && oldValue === BLOCKLET_AUTOMATIC_ENV_VALUE ? '' : oldValue
    };
    setDockerParams({
      ...dockerParams,
      [dataKey]: [...dockerParams[dataKey]]
    });
  };
  const handleSetAutoGenerated = (_, v) => {
    dockerParams[dataKey][index] = {
      ...dockerParams[dataKey][index],
      value: v ? BLOCKLET_AUTOMATIC_ENV_VALUE : '',
      secure: false,
      required: false
    };
    setDockerParams({
      ...dockerParams,
      [dataKey]: [...dockerParams[dataKey]]
    });
  };
  const handleSetDescription = e => {
    dockerParams[dataKey][index] = {
      ...dockerParams[dataKey][index],
      description: e.target.value
    };
    setDockerParams({
      ...dockerParams,
      [dataKey]: [...dockerParams[dataKey]]
    });
  };
  const handleSetType = e => {
    const type = e.target.value === 'web' ? 'web' : 'docker';
    if (type === 'web') {
      dockerParams.dockerArgs.forEach(v => {
        v.type = 'docker';
      });
    }
    const image = dockerParams.dockerImage;
    const dockerPath = `/${image.replace(/\W/g, '-')}-${index}`;
    dockerParams.dockerArgs[index] = {
      ...dockerParams.dockerArgs[index],
      type,
      path: type === 'docker' ? dockerPath : '/',
      protocol: 'http',
      prefix: type === 'docker' ? dockerPath : '/',
      name: 'publicUrl',
      port: 'BLOCKLET_PORT'
    };
    setDockerParams({
      ...dockerParams,
      dockerArgs: [...dockerParams.dockerArgs]
    });
  };
  const handleSetProxyBehavior = e => {
    dockerParams.dockerArgs[index] = {
      ...dockerParams.dockerArgs[index],
      proxyBehavior: e.target.value === 'direct' ? 'direct' : 'service'
    };
    setDockerParams({
      ...dockerParams,
      dockerArgs: [...dockerParams.dockerArgs]
    });
  };
  const handleSetPrefix = e => {
    const prefix = e.target.value;
    dockerParams[dataKey][index] = {
      ...dockerParams[dataKey][index],
      prefix,
      path: prefix === '*' ? '/' : prefix
    };
    setDockerParams({
      ...dockerParams,
      [dataKey]: [...dockerParams[dataKey]]
    });
  };
  const handleChangeValue = e => {
    if (dockerParams[dataKey]?.[index]) {
      dockerParams[dataKey][index].value = e.target.value;
    }
    setDockerParams({
      ...dockerParams,
      [dataKey]: [...dockerParams[dataKey]]
    });
  };
  const isCustomValue = value === `$${dockerArgsToCamelCase(item.key)}` || item.custom;
  const isNotAllowDockerArgs = dataKey === 'dockerArgs' && !allowDockerArgs[item.key];
  const isNotAllowUseCustom = notAllowUseCustomDockerArgs[item.key];
  const isEnv = dataKey === 'dockerEnvs';
  const isPublish = item.key === '--publish';
  let title = item.key;
  if (isPublish && item.type === 'web') {
    title = '--publish (Web)';
  } else if (isEnv) {
    title = `--env ${item.key}`;
  }
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      display: 'flex',
      flexDirection: 'row',
      gap: 2,
      alignItems: 'center'
    },
    children: [/*#__PURE__*/_jsx(Box, {
      sx: {
        width: 250
      },
      children: /*#__PURE__*/_jsx(Typography, {
        sx: {
          textOverflow: 'ellipsis',
          width: '100%',
          overflow: 'hidden'
        },
        children: title
      })
    }), /*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        flexDirection: 'column',
        gap: 1,
        flex: 1
      },
      children: [/*#__PURE__*/_jsx(TextField, {
        disabled: readOnly || isCustomValue || isNotAllowDockerArgs || item.value === BLOCKLET_AUTOMATIC_ENV_VALUE,
        placeholder: "",
        value: isCustomValue ? `$${dockerArgsToCamelCase(item.key)}` : value,
        sx: {
          flex: 1
        },
        error: isNotAllowDockerArgs,
        onChange: handleChangeValue,
        slotProps: {
          input: {
            endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
              position: "end",
              sx: {
                zoom: 0.9
              },
              children: [(!(isNotAllowUseCustom || isNotAllowDockerArgs) || isEnv || isPublish) && /*#__PURE__*/_jsx(IconButton, {
                onClick: () => setShowDialog(true),
                children: /*#__PURE__*/_jsx(Icon, {
                  icon: "icon-park-outline:setting-config"
                })
              }), !readOnly && /*#__PURE__*/_jsx(IconButton, {
                onClick: handleDelete,
                color: isNotAllowDockerArgs ? 'error' : 'default',
                children: /*#__PURE__*/_jsx(Icon, {
                  icon: "ic:round-delete"
                })
              })]
            })
          }
        }
      }), isNotAllowDockerArgs && /*#__PURE__*/_jsx(Typography, {
        variant: "caption",
        color: "error",
        children: t('blocklet.publish.docker.noAllowTheArg')
      }), item.key === '--publish' && /*#__PURE__*/_jsx(Typography, {
        variant: "caption",
        sx: {
          color: 'text.secondary'
        },
        children: t('blocklet.publish.docker.publishTips')
      }), item.key === '--volume' && dockerArgsValidator[item.key](value) && /*#__PURE__*/_jsx(Typography, {
        variant: "caption",
        color: "error",
        children: t('blocklet.publish.docker.volumeTips')
      })]
    }), showDialog && /*#__PURE__*/_jsx(Dialog, {
      open: true,
      fullWidth: true,
      maxWidth: "sm",
      PaperProps: {
        style: {
          minHeight: 0
        }
      },
      title: isEnv ? t('blocklet.publish.docker.modifyEnv') : t('blocklet.publish.docker.modifyParam'),
      onClose: () => setShowDialog(false),
      children: /*#__PURE__*/_jsxs(Box, {
        sx: {
          display: 'flex',
          flexDirection: 'column',
          gap: 1,
          paddingBottom: 2
        },
        children: [isNotAllowUseCustom || isNotAllowDockerArgs || isEnv ? null : /*#__PURE__*/_jsxs(Box, {
          sx: {
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
          },
          children: [/*#__PURE__*/_jsx(Typography, {
            children: t('blocklet.publish.docker.needCustomInput')
          }), /*#__PURE__*/_jsx(IOSSwitch, {
            disabled: readOnly,
            checked: isCustomValue,
            onChange: handleSetCustom,
            sx: {
              zoom: 0.9
            }
          })]
        }), isEnv && /*#__PURE__*/_jsxs(Box, {
          sx: {
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
          },
          children: [/*#__PURE__*/_jsx(Typography, {
            children: t('blocklet.publish.docker.shared')
          }), /*#__PURE__*/_jsx(IOSSwitch, {
            disabled: readOnly,
            checked: item.shared,
            onChange: handleSetShared,
            sx: {
              zoom: 0.9
            }
          })]
        }), isEnv && /*#__PURE__*/_jsxs(Box, {
          sx: {
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
          },
          children: [/*#__PURE__*/_jsx(Typography, {
            children: t('blocklet.publish.docker.required')
          }), /*#__PURE__*/_jsx(IOSSwitch, {
            disabled: readOnly,
            checked: item.required,
            onChange: handleSetRequired,
            sx: {
              zoom: 0.9
            }
          })]
        }), isEnv && /*#__PURE__*/_jsxs(Box, {
          sx: {
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
          },
          children: [/*#__PURE__*/_jsx(Typography, {
            children: t('blocklet.publish.docker.secure')
          }), /*#__PURE__*/_jsx(IOSSwitch, {
            disabled: readOnly,
            checked: item.secure,
            onChange: handleSetSecure,
            sx: {
              zoom: 0.9
            }
          })]
        }), isEnv && /*#__PURE__*/_jsxs(Box, {
          sx: {
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
          },
          children: [/*#__PURE__*/_jsx(Typography, {
            children: t('blocklet.publish.docker.autoGenerated')
          }), /*#__PURE__*/_jsx(IOSSwitch, {
            disabled: readOnly,
            checked: item.value === BLOCKLET_AUTOMATIC_ENV_VALUE,
            onChange: handleSetAutoGenerated,
            sx: {
              zoom: 0.9
            }
          })]
        }), isEnv && /*#__PURE__*/_jsxs(Box, {
          sx: {
            mt: 1,
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
          },
          children: [/*#__PURE__*/_jsx(Typography, {
            sx: {
              flex: 1
            },
            children: t('blocklet.publish.docker.description')
          }), /*#__PURE__*/_jsx(TextField, {
            disabled: readOnly,
            value: item.description,
            onChange: handleSetDescription,
            sx: {
              flex: 1
            },
            label: t('blocklet.publish.docker.description')
          })]
        }), isPublish && /*#__PURE__*/_jsxs(Box, {
          sx: {
            mt: 1,
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
          },
          children: [/*#__PURE__*/_jsx(Typography, {
            sx: {
              flex: 1
            },
            children: t('blocklet.publish.docker.portType')
          }), /*#__PURE__*/_jsxs(Select, {
            value: item.type || 'docker',
            onChange: handleSetType,
            children: [/*#__PURE__*/_jsx(MenuItem, {
              value: "docker",
              children: "Docker"
            }), /*#__PURE__*/_jsx(MenuItem, {
              value: "web",
              children: "Web"
            })]
          })]
        }), isPublish && item.type === 'web' && /*#__PURE__*/_jsxs(Box, {
          sx: {
            mt: 1,
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
          },
          children: [/*#__PURE__*/_jsx(Typography, {
            sx: {
              flex: 1
            },
            children: t('blocklet.publish.docker.proxyBehavior')
          }), /*#__PURE__*/_jsxs(Select, {
            value: item.proxyBehavior || 'service',
            onChange: handleSetProxyBehavior,
            children: [/*#__PURE__*/_jsx(MenuItem, {
              value: "service",
              children: t('blocklet.publish.docker.serviceProxy')
            }), /*#__PURE__*/_jsx(MenuItem, {
              value: "direct",
              children: t('blocklet.publish.docker.directProxy')
            })]
          })]
        }), isPublish && item.type === 'web' && /*#__PURE__*/_jsxs(Box, {
          sx: {
            mt: 1,
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
          },
          children: [/*#__PURE__*/_jsx(Typography, {
            sx: {
              flex: 1
            },
            children: t('blocklet.publish.docker.prefix')
          }), /*#__PURE__*/_jsx(TextField, {
            disabled: readOnly,
            value: item.prefix,
            onChange: handleSetPrefix,
            sx: {
              flex: 1
            },
            label: t('blocklet.publish.docker.prefix')
          })]
        })]
      })
    })]
  });
}
ResourceDockerInputItem.propTypes = {
  dockerParams: PropTypes.object.isRequired,
  setDockerParams: PropTypes.func.isRequired,
  dataKey: PropTypes.string.isRequired,
  item: PropTypes.object.isRequired,
  t: PropTypes.func.isRequired,
  readOnly: PropTypes.bool.isRequired,
  index: PropTypes.number.isRequired
};
export default ResourceDockerInputItem;