/* eslint-disable import/no-unresolved */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useState } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  ImageListItem,
  Typography,
  Stack,
  Box,
  CircularProgress,
} from '@mui/material';
import { useCreation, useReactive } from 'ahooks';
import PropTypes from 'prop-types';
import isUndefined from 'lodash/isUndefined';
import noop from 'lodash/noop';

import DIDSpacesGuideCoverSVG from './assets/did-spaces-guide-cover.svg?react';
import DidSpacesGuideIcon from './assets/did-spaces-guide-icon.svg?react';
import { useLocale } from '../hooks/use-locale';
import { t } from '../locales';
import useMobile from './hooks/use-mobile';

/**
 * @typedef {{
 *  autoClose?: true | false;
 *  open?: boolean;
 * }} DIDSpacesGuideProps
 */

/**
 * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<DIDSpacesGuideProps> & React.RefAttributes<HTMLDivElement>>}
 */
function DIDSpacesGuideView({ ...rawProps }) {
  const props = Object.assign({}, rawProps);
  if (isUndefined(props.open)) {
    props.open = false;
  }
  if (isUndefined(props.onConnect)) {
    props.onConnect = noop;
  }
  const locale = useLocale();
  const isMobile = useMobile();
  const currentState = useReactive({
    loading: false,
  });

  const features = useCreation(() => {
    return [
      t('didSpacesGuide.feature.dataSecurity', locale),
      t('didSpacesGuide.feature.dataSharing', locale),
      t('didSpacesGuide.feature.dataSync', locale),
      t('didSpacesGuide.feature.dataIntegration', locale),
    ];
  }, []);

  return (
    <Dialog
      disableEscapeKeyDown
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      open={props.open}>
      <DialogTitle id="alert-dialog-title">
        <Typography
          sx={{
            fontSize: '20px',
            fontWeight: '500',
          }}>
          {t('didSpacesGuide.title', locale)}
        </Typography>
        <Typography
          sx={{
            fontSize: '14px',
            fontWeight: '300',
            color: '#9397A1',
          }}>
          {t('didSpacesGuide.description', locale)}
        </Typography>
      </DialogTitle>
      <DialogContent sx={{ padding: '12px 20px !important' }}>
        <ImageListItem sx={{ width: '100%' }}>
          <DIDSpacesGuideCoverSVG style={{ width: '100%', height: isMobile ? '100%' : '167px' }} />
        </ImageListItem>
        <Stack
          direction="row"
          sx={{
            justifyContent: 'space-between',
            width: '100%',
            padding: '16px',
            mt: 1,
            backgroundColor: '#F6F6F6',
            borderRadius: '8px',
          }}>
          {features.map((x) => {
            return (
              <Box key={x} sx={{ display: 'flex', flex: 1, padding: 'auto 16px' }}>
                <DidSpacesGuideIcon size="16px" />
                <Typography
                  variant="body1"
                  sx={{
                    marginLeft: '1.5px',
                    color: '#030712',
                    fontFamily: 'Helvetica Neue',
                    fontSize: '12px',
                    fontStyle: 'normal',
                    fontWeight: '400',
                    lineHeight: 'normal',
                    letterSpacing: '-0.12px',
                  }}>
                  {x}
                </Typography>
              </Box>
            );
          })}
        </Stack>
      </DialogContent>
      <DialogActions>
        <Button
          variant="contained"
          size="small"
          onClick={() => {
            currentState.loading = true;
            props.onConnect(() => {
              currentState.loading = false;
            });
          }}
          sx={{
            boxShadow: 'none',
          }}
          disabled={currentState.loading}>
          {currentState.loading ? <CircularProgress color="inherit" size={12} sx={{ mr: 1 }} /> : null}
          {t('didSpacesGuide.connectNow', locale)}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

DIDSpacesGuideView.propTypes = {
  open: PropTypes.bool,
  onConnect: PropTypes.func,
};

/**
 *
 *
 * @export
 * @param {DIDSpacesGuideProps} [props={}]
 * @return {*}
 */
export default function useDIDSpacesGuide(props = {}) {
  const [open, setOpen] = useState(false);
  const [onConnect, setOnConnect] = useState(() => {});

  const invokeOpen = () => {
    setOpen(true);
  };

  const invokeClose = () => {
    setOpen(false);
  };

  const invokeOnConnect = (callback) => {
    setOnConnect(() => callback);
  };
  return {
    DidSpacesGuideView: <DIDSpacesGuideView {...props} open={open} onConnect={onConnect} />,
    didSpacesGuideApi: { open: invokeOpen, close: invokeClose, onConnect: invokeOnConnect },
  };
}