import { VtxImage } from '@vtx/components';
import { Carousel } from 'antd';
import React from 'react';
import useSettings from '../../../vm-hooks/useSettings';
import Base from '../../../vm-info-collection';
import NoData from '../../../vm-nodata';
import { BaseService } from '../../api';
import Map from './Map';

import './index.less';

interface BaseInfoProps {
    id: string;
}

const BaseInfo = (props: BaseInfoProps) => {
    const { id } = props;
    const { theme } = useSettings();

    const { baseInfo, photos } = BaseService.useBaseInfo(id);

    return (
        <div className={`default-baseContent ${theme}`}>
            <div className="default-base">
                <div className="default-base-img">
                    {photos.length ? (
                        <VtxImage.PreviewGroup>
                            <Carousel style={{ width: '370px', height: '244px' }}>
                                {photos.map((item: any) => {
                                    return (
                                        <VtxImage
                                            key={item.id}
                                            src={`/cloudFile/common/downloadFile?id=${item.id}`}
                                            alt={item.name}
                                        />
                                    );
                                })}
                            </Carousel>
                        </VtxImage.PreviewGroup>
                    ) : (
                        <NoData />
                    )}
                </div>
                <Base data={baseInfo} gap={10} />
            </div>
            <div className="default-base-map">
                <Map />
            </div>
        </div>
    );
};

export default BaseInfo;
