import { useState } from 'react';
import { Icon } from '@iconify/react';
import { Box, Tooltip, Typography } from '@mui/material';
import infoOutlineRoundedIcon from '@iconify-icons/material-symbols/info-outline-rounded';
import swapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
import PropTypes from 'prop-types';
import SwitchApp from './switch-app';

export default function DIDConnectTitle({ title, description, extraContent = null, disableSwitchApp = false }) {
  const [showSwitch, setShowSwitch] = useState(false);

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        gap: 0.5,
      }}>
      <Typography
        component="h1"
        variant="h4"
        sx={{
          color: 'text.primary',
          fontWeight: 700,
          fontFamily: 'Lexend',
          display: 'flex',
          alignItems: 'center',
          gap: 0.5,
        }}
        onClick={(e) => {
          if (disableSwitchApp) return;
          // HACK: 连续点击三次才触发
          if (e.detail > 2) {
            setShowSwitch(true);
          }
        }}>
        {title}
        <SwitchApp
          sx={{
            fontSize: 0,
            display: showSwitch ? 'block' : 'none',
          }}>
          <Icon
            icon={swapHorizRoundedIcon}
            style={{
              fontSize: '14px',
            }}
          />
        </SwitchApp>
      </Typography>
      <Typography
        variant="body2"
        sx={{
          color: 'text.secondary',
          fontFamily: 'Lexend',
        }}>
        {description}
        {extraContent ? (
          <Tooltip
            title={extraContent}
            arrow
            slotProps={{
              tooltip: {
                sx: {
                  '&>.MuiTypography-root': {
                    color: 'primary.contrastText',
                    fontFamily: 'Lexend',
                  },
                },
              },
              popper: {
                modifiers: [
                  {
                    name: 'offset',
                    options: {
                      offset: [0, -8],
                    },
                  },
                ],
              },
            }}>
            <Box
              component={Icon}
              icon={infoOutlineRoundedIcon}
              sx={{
                fontSize: 14,
                display: 'inline-block',
                verticalAlign: 'middle',
                ml: 0.5,
                cursor: 'pointer',
                transform: 'translateY(-1px)',
              }}
            />
          </Tooltip>
        ) : null}
      </Typography>
    </Box>
  );
}

DIDConnectTitle.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  extraContent: PropTypes.any,
  disableSwitchApp: PropTypes.bool,
};