import { Box } from '@mui/material';
import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
import { PROVIDER_NAME } from '@blocklet/constant';
import OAuthAuth0 from './auth0';
import OAuthGithub from './github';
import OAuthGoogle from './google';
import OAuthApple from './apple';
import OAuthTwitter from './twitter';
import DragItem from './drag-item';
import { useNodeContext } from '../../../contexts/node';
import { useBlockletContext } from '../../../contexts/blocklet';
import { jsx as _jsx } from "react/jsx-runtime";
const avaliableAuthentication = [{
  name: 'github',
  title: PROVIDER_NAME.github,
  icon: /*#__PURE__*/_jsx(ProviderIcon, {
    provider: "github",
    sx: {
      width: 20,
      height: 20
    }
  }),
  component: /*#__PURE__*/_jsx(OAuthGithub, {})
}, {
  name: 'google',
  title: PROVIDER_NAME.google,
  icon: /*#__PURE__*/_jsx(ProviderIcon, {
    provider: "google",
    sx: {
      width: 20,
      height: 20
    }
  }),
  component: /*#__PURE__*/_jsx(OAuthGoogle, {})
}, {
  name: 'apple',
  title: PROVIDER_NAME.apple,
  icon: /*#__PURE__*/_jsx(ProviderIcon, {
    provider: "apple",
    sx: {
      width: 20,
      height: 20
    }
  }),
  component: /*#__PURE__*/_jsx(OAuthApple, {})
}, {
  name: 'twitter',
  title: PROVIDER_NAME.twitter,
  icon: /*#__PURE__*/_jsx(ProviderIcon, {
    provider: "twitter",
    sx: {
      width: 20,
      height: 20
    }
  }),
  component: /*#__PURE__*/_jsx(OAuthTwitter, {})
}, {
  name: 'auth0',
  title: PROVIDER_NAME.auth0,
  icon: /*#__PURE__*/_jsx(ProviderIcon, {
    provider: "auth0",
    sx: {
      width: 20,
      height: 20
    }
  }),
  component: /*#__PURE__*/_jsx(OAuthAuth0, {})
}];
const DEFAULT_OAUTH_LIST = ['github', 'google', 'apple', 'twitter', 'auth0'];
export default function OAuthLogin() {
  const {
    api
  } = useNodeContext();
  const {
    blocklet
  } = useBlockletContext();
  const did = blocklet?.meta?.did;
  const oauthConfig = blocklet?.settings?.oauth || {};
  const oauthSort = Object.keys(oauthConfig).sort((a, b) => {
    if (oauthConfig[a]?.order !== undefined && oauthConfig[b]?.order !== undefined) {
      return oauthConfig[a].order - oauthConfig[b].order;
    }
    if (oauthConfig[a]?.order !== undefined) {
      return -1;
    }
    return 1;
  });
  for (const OAUTH_ITEM of DEFAULT_OAUTH_LIST) {
    if (!oauthSort.includes(OAUTH_ITEM)) {
      oauthSort.push(OAUTH_ITEM);
    }
  }
  const sortMaps = useReactive(oauthSort.reduce((total, value, index) => Object.assign(total, {
    [value]: index
  }), {}));
  const sortedAuthentication = useCreation(() => {
    const list = [...avaliableAuthentication];
    list.sort((a, b) => sortMaps[a.name] - sortMaps[b.name]);
    return list.map(x => ({
      ...x,
      enabled: oauthConfig[x.name]?.enabled ?? false
    }));
  }, [sortMaps.auth0, sortMaps.github, sortMaps.google]);
  const dndProps = {};
  if (typeof window !== 'undefined') {
    dndProps.context = window;
  }
  const saveOrder = useMemoizedFn(async rawOrderData => {
    const orderData = {};
    Object.keys(rawOrderData).forEach(oauthName => {
      orderData[oauthName] = {
        order: rawOrderData[oauthName]
      };
    });
    await api.configOAuth({
      input: {
        did,
        oauth: JSON.stringify(orderData)
      }
    });
  });
  const handleMoveItem = useMemoizedFn((dragIndex, hoverIndex) => {
    const dragItem = sortedAuthentication[dragIndex];
    const hoverItem = sortedAuthentication[hoverIndex];
    sortMaps[dragItem.name] = hoverIndex;
    sortMaps[hoverItem.name] = dragIndex;
  });
  const handleSaveOrder = useMemoizedFn(async () => {
    await saveOrder(sortMaps);
  });
  return /*#__PURE__*/_jsx(Box, {
    sx: {
      '.section-left': {
        width: '180px'
      }
    },
    children: /*#__PURE__*/_jsx(DndProvider, {
      backend: HTML5Backend,
      ...dndProps,
      children: sortedAuthentication.map((x, index) => /*#__PURE__*/_jsx(DragItem, {
        index: index,
        id: x.name,
        title: x.title,
        icon: x.icon,
        onMove: handleMoveItem,
        onEnd: handleSaveOrder,
        defaultExpand: x.enabled,
        children: x.component
      }, x.name))
    })
  });
}