import React, { useEffect, useState } from 'react';
import { Box, Divider, Flex, useTheme, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
import { useCopyData } from '@/hooks/useCopyData';
import dynamic from 'next/dynamic';
import MyIcon from '@/components/Icon';
import { useGlobalStore } from '@/store/global';
import { feConfigs } from '@/store/static';

const APIKeyModal = dynamic(() => import('@/components/APIKeyModal'), {
  ssr: false
});

const API = ({ appId }: { appId: string }) => {
  const theme = useTheme();
  const { copyData } = useCopyData();
  const [baseUrl, setBaseUrl] = useState('https://fastgpt.run/api/openapi');
  const {
    isOpen: isOpenAPIModal,
    onOpen: onOpenAPIModal,
    onClose: onCloseAPIModal
  } = useDisclosure();
  const [isLoaded, setIsLoaded] = useState(false);

  const { isPc } = useGlobalStore();

  useEffect(() => {
    setBaseUrl(`${location.origin}/api/openapi`);
  }, []);

  return (
    <Flex flexDirection={'column'} pt={[0, 5]} h={'100%'}>
      <Flex px={5} alignItems={'center'}>
        <Box flex={1}>
          AppId:
          <Box
            as={'span'}
            ml={2}
            fontWeight={'bold'}
            cursor={'pointer'}
            onClick={() => copyData(appId, '已复制 AppId')}
          >
            {appId}
          </Box>
        </Box>
        {isPc && (
          <>
            <Flex
              bg={'myWhite.600'}
              py={2}
              px={4}
              borderRadius={'md'}
              cursor={'pointer'}
              onClick={() => copyData(baseUrl, '已复制 API 地址')}
            >
              <Box border={theme.borders.md} px={2} borderRadius={'md'} fontSize={'sm'}>
                API服务器
              </Box>
              <Box ml={2} color={'myGray.900'} fontSize={['sm', 'md']}>
                {baseUrl}
              </Box>
            </Flex>
            <Button
              ml={3}
              leftIcon={<MyIcon name={'apikey'} w={'16px'} color={''} />}
              variant={'base'}
              onClick={onOpenAPIModal}
            >
              API 秘钥
            </Button>
          </>
        )}
      </Flex>
      <Divider mt={3} />
      <Box flex={'1 0 0'} h={0}>
        <Skeleton h="100%" isLoaded={isLoaded} fadeDuration={2}>
          <iframe
            style={{
              width: '100%',
              height: '100%'
            }}
            src={
              feConfigs?.openAPIUrl ||
              'https://kjqvjse66l.feishu.cn/docx/DmLedTWtUoNGX8xui9ocdUEjnNh'
            }
            frameBorder="0"
            onLoad={() => setIsLoaded(true)}
            onError={() => setIsLoaded(true)}
          />
        </Skeleton>
      </Box>
      {isOpenAPIModal && <APIKeyModal onClose={onCloseAPIModal} />}
    </Flex>
  );
};

export default API;