import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import PropTypes from 'prop-types';
import { useState } from 'react';
import { Box, InputAdornment, Tab, Tabs, TextField, Typography } from '@mui/material';
import { PROJECT } from '@blocklet/constant';
import IntroductionPreview from './introduction-preview';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function Introduction({
  params,
  setParams,
  paramsErrTip,
  loading,
  setParamsErrTip,
  readOnly
}) {
  const {
    t
  } = useLocaleContext();
  const [nowTab, setNowTab] = useState(readOnly ? 'preview' : 'write');
  const handleChange = (_, newValue) => {
    setNowTab(newValue);
  };
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      border: '1px solid transparent',
      borderRadius: 2
    },
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
      },
      children: [/*#__PURE__*/_jsx(Typography, {
        variant: "h6",
        sx: {
          fontWeight: 'bold'
        },
        children: t('common.introduction')
      }), /*#__PURE__*/_jsxs(Tabs, {
        value: nowTab,
        onChange: handleChange,
        "aria-label": "wrapped label tabs example",
        children: [/*#__PURE__*/_jsx(Tab, {
          value: "write",
          label: "Write"
        }), /*#__PURE__*/_jsx(Tab, {
          value: "preview",
          label: "Preview"
        })]
      })]
    }), /*#__PURE__*/_jsx(Box, {
      sx: {
        display: nowTab === 'write' ? 'block' : 'none',
        width: '100%',
        marginTop: 3
      },
      children: /*#__PURE__*/_jsx(TextField, {
        disabled: loading || readOnly,
        sx: {
          border: 'none'
        }
        // label={`Blocklet ${t('common.introduction')}`}
        ,
        placeholder: `Blocklet ${t('common.introduction')}`,
        autoComplete: "off",
        variant: "outlined",
        fullWidth: true,
        multiline: true,
        minRows: 4,
        value: params.blockletIntroduction || '',
        onChange: e => {
          setParamsErrTip({
            blockletIntroduction: ''
          });
          setParams({
            blockletIntroduction: e.target.value.slice(0, PROJECT.MAX_INTRO_LENGTH)
          });
        },
        error: !!paramsErrTip.blockletIntroduction,
        helperText: paramsErrTip.blockletIntroduction || '',
        slotProps: {
          input: {
            'data-cy': 'export-blocklet-introduction',
            readOnly,
            endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
              position: "end",
              children: [params?.blockletIntroduction?.length || 0, " / ", PROJECT.MAX_INTRO_LENGTH]
            })
          }
        }
      })
    }), /*#__PURE__*/_jsx(Box, {
      sx: {
        display: nowTab === 'preview' ? 'block' : 'none',
        mt: 3
      },
      children: /*#__PURE__*/_jsx(IntroductionPreview, {
        text: params.blockletIntroduction || ''
      })
    })]
  });
}
Introduction.propTypes = {
  params: PropTypes.object.isRequired,
  setParams: PropTypes.func.isRequired,
  paramsErrTip: PropTypes.object.isRequired,
  setParamsErrTip: PropTypes.func.isRequired,
  readOnly: PropTypes.bool.isRequired,
  loading: PropTypes.bool.isRequired
};
export default Introduction;