import 'dayjs/locale/ru'; // load on demand

import React, {
  useEffect,
  useState,
} from 'react';

import dayjs from 'dayjs';
import {
  Badge,
  List,
  ListItem,
} from 'konsta/react';
import { observer } from 'mobx-react';
import { IoChatbubblesOutline } from 'react-icons/io5';

import { ExtensionsStore } from '../../../api/request';
import { ShmChannelMessageType } from '../../../api/types';
import Skeleton from '../../../components/Skeleton';
import store from '../../../stores/store';

dayjs.locale("ru");


const LastMessageText = ({ message }: { message?: ShmChannelMessageType | null }) => {


    if (!!message?.deleted) {
        return "Удалено";
    }

    if (!message) {
        return "...";
    }

    if (message?.text) {
        return message?.text;
    }

    if (!!message.attachments?.length) {
        return "Прикрепленные файлы";
    }

    if (message?.voice?.url) {
        return "Аудио сообщение";
    }

    return "...";
};


const DialogsList = ({ channelTab }: { channelTab?: "member" | "join" }) => {


    const [loading, setLoading] = useState(false);

    useEffect(() => {

        setLoading(true);
        if (!channelTab) {
            store.loadChannelList().then(() => {
                setLoading(false);
            });
        }

        if (channelTab === "member") {
            store.loadChannelList().then(() => {
                setLoading(false);
            });
        } else {
            store.loadJoinChannelList().then(() => {
                setLoading(false);
            });
        }


    }, [channelTab]);


    const channelList = channelTab === "join" ? store.joinChannelList : store.channelList;


    return (<List strong outline>
        {loading ? <div>


            {[1, 2, 3, 4].map(() => {
                return <Skeleton className='h-20 mb-2' />
            })}

        </div> :

            channelList.map((channel) => {

                const lastMessage = ExtensionsStore.shmChannelMessagesByID(channel.lastMessage);

                const unreadCount = channel.unreadCounts?.[store.userID as any] ?? 0

                return (
                    <ListItem
                        after={!!unreadCount ? <Badge>{unreadCount}</Badge> : undefined}
                        link

                        onClick={() => {
                            if (channel._id) {
                                store.setSelectChannelID(channel._id);
                            }
                        }}
                        chevron={false}
                        title={
                            !!channel.name ? channel.name : "Без имени"
                        }
                        /* after={
                           chat?.unread && chat?.unread > 0 ? (
                             <Badge>{chat?.unread}</Badge>
                           ) : undefined
                         }*/

                        text={<LastMessageText message={lastMessage} />}

                        footer={!!channel.created_at ? dayjs(channel.created_at).format("DD.MM.YYYY HH:mm") : ""}
                        media={
                            <div className='w-10 h-10 flex items-center justify-center text-2xl text-gray-500 bg-gray-100 rounded-full'>
                                <IoChatbubblesOutline />
                            </div>
                        }
                    />
                );
            })}
    </List>


    );
};

export default observer(DialogsList);
