/* eslint-disable react-hooks/exhaustive-deps */
import { SearchOutlined } from '@ant-design/icons';
import { Avatar, Button, Input, List, Tag } from 'antd';
import React, { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { createFlight, getListUsersInvitedFlight } from '../../../../api/flightApi';
import defaultAvatar from '../../../../assets/defaultAvatar.jpg';
import UniformModal from '../../../../components/CustomLibs/UniformModal';
import { ScrollBars } from '../../../../components/CustomLibs/UniFormScrollBar';
import { TypeOfNotification, useNotification } from '../../../../context/NotificationContext';
import { RootState } from '../../../../redux/store';
import { UserTournament } from '../../../../types/tournament';
import { OverflowElementTitle, useDebounce } from '../../../../utils';
import FlightSelection from './FlightSelection';
import './index.css';

interface CreateFlightProps {
	isVisible: boolean;
	onClose: () => void;
	tournamentId: number;
}

const CreateFlightModal: React.FC<CreateFlightProps> = ({ isVisible, onClose, tournamentId }) => {
	const { t } = useTranslation();
	const { show } = useNotification();
	const { user } = useSelector((state: RootState) => state.auth);
	const [selectedMembers, setSelectedMembers] = useState<number[]>(user && user.id !== null ? [user.id] : []);
	const [searchText, setSearchText] = useState<string>('');
	const [loading, setLoading] = useState(false);
	const [page, setPage] = useState(1);
	const [users, setUsers] = useState<UserTournament[]>([]);
	const [hasMore, setHasMore] = useState(true);
	const perPage = 4;

	const transformUserData = (data: UserTournament[]) => {
		return data.map((users) => ({
			...users,
			gender: users.gender === 'FEMALE' ? t('listUserPage.female') : users.gender === 'MALE' ? t('listUserPage.male') : 'Unknown',
		})) as UserTournament[];
	};

	const debouncedHandleSearch = useDebounce((newSearchText: string) => {
		setSearchText(newSearchText);
		setPage(1); // Reset to the first page when the search changes
		setHasMore(true);
	}, 500);

	const fetchData = async () => {
		setLoading(true);
		try {
			const response = await getListUsersInvitedFlight({ text_search: searchText, per_page: perPage, page }, tournamentId);
			setTimeout(() => {
				if (page === 1) {
					setUsers(transformUserData(response.data.items));
				} else {
					setUsers((prevUsers) => [...prevUsers, ...transformUserData(response.data.items)]);
				}
				setHasMore(response.data.items.length === perPage);
				setLoading(false);
			}, 1000);
		} catch (error: any) {
			show(TypeOfNotification.ERROR, error.response?.data?.detail);
		}
	};

	useEffect(() => {
		isVisible && fetchData();
	}, [isVisible, page, tournamentId, searchText]);

	useEffect(() => {
		if (user && user.id !== null && !selectedMembers.includes(user.id)) {
			setSelectedMembers((prev) => (user && user.id !== null ? [user.id, ...prev] : prev));
		}
	}, [user, isVisible]);

	const toggleSelection = (id: number) => {
		setSelectedMembers((prev) => {
			if (prev.includes(id)) {
				return prev.filter((item) => item !== id);
			} else if (prev.length < 6) {
				return [...prev, id];
			} else {
				show(TypeOfNotification.WARNING, t('createFlightModal.maxMembersWarning'));
				return prev;
			}
		});
	};

	const handleClose = () => {
		setSelectedMembers([]);
		onClose();
	};

	const handleSubmit = async () => {
		try {
			await createFlight(tournamentId, selectedMembers);
			show(TypeOfNotification.SUCCESS, t('createFlightModal.successMessage'));
			handleClose(); // Đóng modal sau khi tạo flight thành công
		} catch (error: any) {
			show(TypeOfNotification.ERROR, error.response?.data?.detail || t('createFlightModal.errorMessage'));
		}
	};

	const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
		debouncedHandleSearch(e.target.value);
	};

	const renderList = () => (
		<>
			{!loading && (
				<List
					itemLayout="horizontal"
					dataSource={users}
					renderItem={(member) => (
						<List.Item style={{ width: '390px' }}>
							<List.Item.Meta
								className="tournament-create-flight-custom-list-item"
								avatar={<Avatar src={member.avatar || defaultAvatar} size={55} style={{ border: '2px solid green' }} />}
								title={
									<div
										style={{
											display: 'flex',
											justifyContent: 'space-between',
											alignItems: 'center',
											width: '240px',
											height: '22px',
										}}
									>
										<OverflowElementTitle content={<span className="tournament-create-flight-flight-member-name">{member.full_name}</span>} />
										<Button
											className="tournament-create-flight-cancel-button"
											style={{
												backgroundColor: selectedMembers.includes(member.id) ? 'gray' : 'var(--color-btn-confirm) !important',
												color: 'white',
											}}
											onClick={() => {
												toggleSelection(member.id);
											}}
											disabled={user?.id === member.id}
										>
											{selectedMembers.includes(member.id) ? t('createFlightModal.selectedMember') : t('createFlightModal.selectMember')}
										</Button>
									</div>
								}
								description={
									<>
										<Tag color="green" className="tournament-create-flight-flight-member-tag">
											{member.vga}
										</Tag>{' '}
										&nbsp;&nbsp;
										<Tag color="black" className="tournament-create-flight-flight-member-tag" style={{ width: '60px' }}>
											HDC {member.handicap_index}
										</Tag>
									</>
								}
							/>
						</List.Item>
					)}
				/>
			)}
		</>
	);

	return (
		<UniformModal
			open={isVisible}
			title={
				<div style={{ display: 'flex', alignItems: 'center', paddingTop: 10 }}>
					<span style={{ fontSize: '24px' }}>{t('createFlightModal.createFlight')}</span>
				</div>
			}
			onCancel={handleClose}
			footer={
				<>
					<div className="tournament-create-flight-button-group">
						{selectedMembers.length > 0 && (
							<Button className="tournament-create-flight-confirm-button" onClick={handleSubmit}>
								{t('createFlightModal.confirm')}
							</Button>
						)}
					</div>
				</>
			}
			className="tournament-create-flight-team-modal"
			width={450}
		>
			<div className="tournament-create-flight-team-container">
				{selectedMembers.length > 0 && (
					<>
						<FlightSelection selectedMembers={selectedMembers.map(String)} users={users} userNotJoin={[]} toggleSelection={toggleSelection} />
					</>
				)}
				<p className="tournament-create-flight-subtitle">{t('createFlightModal.memberTournament')}</p>
				<div className="row-left-search">
					<Input placeholder={t('createFlightModal.search')} prefix={<SearchOutlined />} allowClear onChange={handleSearch} />
				</div>

				<ScrollBars
					isLoading={loading}
					containerHeight={200}
					hasNextLoad={hasMore}
					onLoadNext={() => {
						setPage((pre) => pre + 1);
					}}
					customStyle={{
						padding: '8px 8px 0px 0px',
					}}
				>
					{renderList()}
				</ScrollBars>
			</div>
		</UniformModal>
	);
};

export default CreateFlightModal;