import PropTypes from 'prop-types';
import { Box, TextField, Tabs, Tab, Button, DialogTitle, DialogContent, Typography, DialogActions, Dialog, Select, MenuItem, FormControl, FormHelperText } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { useEffect, useState } from 'react';
import { dockerParseCommand, dockerBuildCommand, allowDockerArgs, dockerCmdValidator } from '@abtnode/docker-utils';
import ResourceDockerInputItem from './resource-docker-input-item';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const exampleDockerCommand = `
docker run --name postgrest
-p 3000:3000
-e PGRST_DB_URI="postgres://username:password@host:port/database"
-e PGRST_DB_SCHEMA="public"
-e PGRST_DB_ANON_ROLE="anon"
postgrest/postgrest
`.trim();
export default function ResourceDocker({
  readOnly,
  paramsErrTip,
  setParamsErrTip,
  error,
  params,
  setParams
}) {
  const {
    t
  } = useLocaleContext();
  const [nowTab, setNowTab] = useState('dockerCommand');
  const [dockerCommand, setDockerCommand] = useState('');
  const [showDialog, setShowDialog] = useState(false);
  const [addItemType, setAddItemType] = useState('--volume');
  const [addItemEnvKey, setAddItemEnvKey] = useState('');
  const [dockerParams, setDockerParams] = useState(dockerParseCommand(dockerCommand));
  const dockerArgs = dockerParams.dockerArgs || [];
  const dockerEnvs = dockerParams.dockerEnvs || [];
  const dockerImage = dockerParams.dockerImage || '';
  const dockerCMD = dockerParams.dockerCommand || '';
  const handleDockerCommandChange = e => {
    const {
      value
    } = e.target;
    setDockerCommand(value);
  };
  useEffect(() => {
    if (params.blockletDocker && params.blockletDocker.dockerImage && !dockerImage) {
      setDockerParams(params.blockletDocker);
    }
  }, [params, dockerImage, setDockerParams]);
  const handleCommandToParams = e => {
    const nextParams = dockerParseCommand(e.target.value);
    setDockerParams(old => {
      const oldPublish = old.dockerArgs.find(v => v.key === '--publish' && v.type === 'web');
      let hasWebType = false;
      const setWebType = item => {
        item.type = 'web';
        item.path = oldPublish.path || '/';
        item.protocol = oldPublish.protocol || 'http';
        item.prefix = oldPublish.prefix || '/';
        item.name = oldPublish.name || 'publicUrl';
        item.port = oldPublish.port || 'BLOCKLET_PORT';
      };
      nextParams.dockerArgs.forEach(item => {
        const oldItem = old.dockerArgs.find(v => v.key === item.key);
        if (oldItem) {
          Object.entries(oldItem).forEach(([key, value]) => {
            if (value !== undefined && value !== null && key !== 'value') {
              item[key] = value;
            }
          });
          item.proxyBehavior = item.proxyBehavior || 'server';
          if (item.key === '--publish' && item.type === 'web') {
            if (hasWebType) {
              item.type = 'docker';
            } else {
              setWebType(item);
              hasWebType = true;
            }
          }
        }
      });
      if (oldPublish) {
        const hasPublishWeb = nextParams.dockerArgs.find(v => v.key === '--publish' && v.type === 'web');
        if (!hasPublishWeb) {
          const lastPublish = nextParams.dockerArgs.find(v => v.key === '--publish' && v.value === oldPublish.value);
          if (lastPublish) {
            setWebType(lastPublish);
          } else {
            hasWebType = false;
            nextParams.dockerArgs.forEach(item => {
              if (item.key === '--publish' && !hasWebType) {
                setWebType(item);
                hasWebType = true;
              }
            });
          }
        }
      }
      nextParams.dockerEnvs.forEach(item => {
        const oldItem = old.dockerEnvs.find(v => v.key === item.key);
        if (oldItem) {
          Object.entries(oldItem).forEach(([key, value]) => {
            if (value !== undefined && value !== null && key !== 'value') {
              item[key] = value;
            }
          });
        }
      });
      return nextParams;
    });
  };
  const dialogConfirm = () => {
    setShowDialog(false);
    if (addItemType === '--env') {
      setDockerParams({
        ...dockerParams,
        dockerEnvs: [...dockerEnvs, {
          key: addItemEnvKey,
          value: '',
          custom: '',
          secure: false,
          shared: false,
          required: false,
          description: addItemEnvKey
        }]
      });
      setAddItemEnvKey('');
      return;
    }
    setDockerParams({
      ...dockerParams,
      dockerArgs: [...dockerArgs, {
        key: addItemType,
        value: '',
        type: 'docker',
        name: '',
        path: '',
        prefix: '',
        protocol: ''
      }]
    });
  };
  const dialogCancel = () => {
    setShowDialog(false);
    setAddItemEnvKey('');
  };
  const handleDockerImageChange = e => {
    const {
      value
    } = e.target;
    setDockerParams({
      ...dockerParams,
      dockerImage: value
    });
    if (value.indexOf(' ') > -1) {
      setParamsErrTip({
        ...paramsErrTip,
        dockerImageName: t('blocklet.publish.docker.dockerImageNameError')
      });
    } else {
      setParamsErrTip({
        ...paramsErrTip,
        dockerImageName: ''
      });
    }
  };
  const handleDockerCMDChange = e => {
    const {
      value
    } = e.target;
    setDockerParams({
      ...dockerParams,
      dockerCommand: value
    });
    try {
      dockerCmdValidator(value);
      setParamsErrTip({
        ...paramsErrTip,
        dockerCMD: ''
      });
    } catch (_) {
      setParamsErrTip({
        ...paramsErrTip,
        dockerCMD: t('blocklet.publish.docker.dockerCMDError')
      });
    }
  };
  useEffect(() => {
    if (nowTab === 'dockerCommand') {
      setDockerCommand(dockerBuildCommand(dockerParams));
    }
  }, [dockerParams, nowTab]);
  useEffect(() => {
    setParams(prevParams => {
      return {
        ...prevParams,
        blockletDocker: {
          dockerImage: dockerParams.dockerImage,
          dockerCommand: dockerParams.dockerCommand,
          dockerArgs: dockerParams.dockerArgs,
          dockerEnvs: dockerParams.dockerEnvs
        }
      };
    });
  }, [dockerParams, setParams]);
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      mt: 3
    },
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        gap: 2
      },
      children: [/*#__PURE__*/_jsx(Box, {
        sx: {
          borderBottom: 1,
          borderColor: 'divider',
          mb: 2
        },
        children: /*#__PURE__*/_jsxs(Tabs, {
          value: nowTab,
          onChange: (_, value) => setNowTab(value),
          children: [/*#__PURE__*/_jsx(Tab, {
            value: "dockerCommand",
            label: t('blocklet.publish.docker.dockerCommand')
          }), /*#__PURE__*/_jsx(Tab, {
            value: "dockerParams",
            label: t('blocklet.publish.docker.dockerParams')
          })]
        })
      }), nowTab === 'dockerCommand' && /*#__PURE__*/_jsxs(Box, {
        children: [/*#__PURE__*/_jsx(TextField, {
          disabled: readOnly,
          label: t('blocklet.publish.docker.pleaseInputDockerCommand'),
          placeholder: exampleDockerCommand,
          autoComplete: "off",
          variant: "outlined",
          fullWidth: true,
          multiline: true,
          spellCheck: false,
          minRows: 10,
          value: dockerCommand,
          onChange: handleDockerCommandChange,
          onBlur: handleCommandToParams,
          slotProps: {
            input: {
              'data-cy': 'blocklet-docker-command',
              readOnly
            }
          }
        }), /*#__PURE__*/_jsxs(Box, {
          sx: {
            display: 'flex',
            flexDirection: 'row',
            gap: 2,
            alignItems: 'center'
          },
          children: [/*#__PURE__*/_jsx(Box, {
            sx: {
              flex: 1
            }
          }), /*#__PURE__*/_jsx(Button, {
            sx: {
              mt: 2
            },
            variant: "contained",
            onClick: () => setNowTab('dockerParams'),
            children: t('blocklet.publish.docker.nextTab')
          })]
        })]
      }), nowTab === 'dockerParams' && /*#__PURE__*/_jsxs(Box, {
        sx: {
          display: 'flex',
          flexDirection: 'column',
          gap: 2
        },
        children: [/*#__PURE__*/_jsx(TextField, {
          disabled: readOnly,
          label: t('blocklet.publish.docker.dockerImageName'),
          placeholder: "Example: docker.io/postgrest/postgrest:latest",
          value: dockerImage,
          sx: {
            flex: 1
          },
          color: paramsErrTip.dockerImageName ? 'error' : 'primary',
          error: !!paramsErrTip.dockerImageName,
          helperText: paramsErrTip.dockerImageName || '',
          onChange: handleDockerImageChange
        }), /*#__PURE__*/_jsx(TextField, {
          disabled: readOnly,
          label: `Docker CMD (${t('common.optional')})`,
          placeholder: "Docker CMD",
          value: dockerCMD,
          sx: {
            flex: 1
          },
          color: paramsErrTip.dockerCMD ? 'error' : 'primary',
          error: !!paramsErrTip.dockerCMD,
          helperText: paramsErrTip.dockerCMD || '',
          onChange: handleDockerCMDChange
        }), /*#__PURE__*/_jsx(Box, {
          sx: {
            height: 4
          }
        }), dockerArgs.map((item, index) => {
          return /*#__PURE__*/_jsx(ResourceDockerInputItem, {
            index: index
            // eslint-disable-next-line react/no-array-index-key
            ,

            item: item,
            dockerParams: dockerParams,
            setDockerParams: setDockerParams,
            dataKey: "dockerArgs",
            t: t,
            readOnly: readOnly
          }, `${item.key}-${index}`);
        }), dockerEnvs.map((item, index) => /*#__PURE__*/_jsx(ResourceDockerInputItem
        // eslint-disable-next-line react/no-array-index-key
        , {
          index: index,
          item: item,
          dockerParams: dockerParams,
          setDockerParams: setDockerParams,
          dataKey: "dockerEnvs",
          t: t,
          readOnly: readOnly
        }, `${item.key}-${index}`)), !readOnly && /*#__PURE__*/_jsxs(Box, {
          sx: {
            display: 'flex',
            flexDirection: 'row',
            gap: 2,
            alignItems: 'center'
          },
          children: [/*#__PURE__*/_jsx(Box, {
            sx: {
              flex: 1
            }
          }), /*#__PURE__*/_jsx(Button, {
            onClick: () => setShowDialog(true),
            children: t('blocklet.publish.docker.addItem')
          })]
        })]
      })]
    }), !!error && /*#__PURE__*/_jsx(Box, {
      sx: {
        color: 'error.main',
        mt: 1,
        fontSize: 14
      },
      children: error
    }), showDialog && /*#__PURE__*/_jsxs(Dialog, {
      fullWidth: true,
      open: true,
      children: [/*#__PURE__*/_jsx(DialogTitle, {
        children: t('blocklet.publish.docker.addItem')
      }), /*#__PURE__*/_jsx(DialogContent, {
        children: /*#__PURE__*/_jsxs(FormControl, {
          sx: {
            mt: 1,
            width: '100%',
            minWidth: 480,
            maxWidth: '100%'
          },
          children: [/*#__PURE__*/_jsx(Select, {
            labelId: "demo-simple-select-helper-label",
            id: "demo-simple-select-helper",
            value: addItemType,
            sx: {
              width: '100%'
            },
            onChange: e => setAddItemType(e.target.value),
            children: Object.keys(allowDockerArgs).map(key => /*#__PURE__*/_jsx(MenuItem, {
              value: key,
              children: key
            }))
          }), addItemType === '--publish' && /*#__PURE__*/_jsx(Typography, {
            variant: "caption",
            sx: {
              color: 'text.secondary'
            },
            children: t('blocklet.publish.docker.publishTips')
          }), addItemType === '--volume' && /*#__PURE__*/_jsx(Typography, {
            variant: "caption",
            sx: {
              color: 'text.secondary'
            },
            children: t('blocklet.publish.docker.volumeTips')
          }), addItemType === '--env' && /*#__PURE__*/_jsxs(Box, {
            sx: {
              mt: 3,
              width: '100%'
            },
            children: [/*#__PURE__*/_jsx(TextField, {
              value: addItemEnvKey,
              onChange: e => setAddItemEnvKey(e.target.value),
              sx: {
                width: '100%'
              },
              label: t('blocklet.publish.docker.envKey')
            }), /*#__PURE__*/_jsx(FormHelperText, {
              children: t('blocklet.publish.docker.dockerArgValue')
            })]
          })]
        })
      }), /*#__PURE__*/_jsxs(DialogActions, {
        children: [/*#__PURE__*/_jsx(Button, {
          onClick: dialogCancel,
          children: t('common.cancel')
        }), /*#__PURE__*/_jsx(Button, {
          onClick: dialogConfirm,
          children: t('common.confirm')
        })]
      })]
    })]
  });
}
ResourceDocker.propTypes = {
  readOnly: PropTypes.bool.isRequired,
  params: PropTypes.object.isRequired,
  setParams: PropTypes.func.isRequired,
  error: PropTypes.string.isRequired,
  setParamsErrTip: PropTypes.func.isRequired,
  paramsErrTip: PropTypes.func.isRequired
};