import type { FC } from 'react';
import React, { useEffect, useState } from 'react';
import { MultiSelect, Sidecar, Stepper } from '@theorchard/suite-components';
import { Alert } from '@theorchard/suite-components';
import { TerritoryStandard } from 'src/data/globalTypes';
import { useGetProductTracks, useTerritoriesQuery } from 'src/data/queries';
import CountriesMultiSelect from 'src/pages/productEditModal/components/countriesMultiSelect';
import TracksMultiSelect from 'src/pages/productEditModal/components/tracksMultiSelect';
import { getTracksWithConflictingRules } from 'src/utils/rules';
import type { CountryOption, Step } from '@theorchard/suite-components';
import type { Territories } from 'src/data/queries/territories/__generated__/TerritoriesQuery';
import type { Track } from 'src/types';

const defaultServiceValue = {
    label: 'TikTok',
    value: 'tiktok',
};

const CLASS_NAME = 'AddFingerprintRestriction';

interface Props {
    productId: string;
    isOpen: boolean;
    onClose: () => void;
    onRulesUpdated: (tracks: Track[]) => void;
}

const getTracksStepContent = (
    tracks: Track[],
    tracksLoading: boolean,
    setSelectedTracks: (tracks: Track[]) => void
) => {
    return (
        <div className={`${CLASS_NAME}-restriction-tracks`}>
            <TracksMultiSelect
                tracks={tracks}
                loading={tracksLoading}
                onApply={setSelectedTracks}
            />
        </div>
    );
};

const getCountriesStepContent = (
    territories: Territories['territories'],
    handleCountries: (countries: CountryOption[]) => void
) => {
    return (
        <div className={`${CLASS_NAME}-restriction-countries`}>
            <CountriesMultiSelect
                onApply={handleCountries}
                territories={territories}
            />
        </div>
    );
};

const getServicesStepContent = () => {
    return (
        <div className={`${CLASS_NAME}-restriction-services`}>
            <MultiSelect
                testId="services-dropdown"
                menuMinWidth="auto"
                menuWidth="100%"
                selectedValue={[defaultServiceValue]}
                disabled={true}
                excludeMode
                showExcludeMode
                excludeModeText={$t(
                    'contentReview.addFingerprintRestriction.sidecar.excludeModeText'
                )}
            />
        </div>
    );
};

const AddFingerprintRestriction: FC<Props> = ({
    productId,
    isOpen,
    onClose,
    onRulesUpdated,
}) => {
    const [trackWithRulesConflicts, setTrackWithRulesConflicts] = useState<
        Track[]
    >([]);
    const [selectedTracks, setSelectedTracks] = useState<Track[]>([]);
    const [selectedCountries, setSelectedCountries] = useState<string[]>([]);
    const { data: territories = [] } = useTerritoriesQuery(
        TerritoryStandard.ISO_3166_1_2016
    );
    const { loading: tracksLoading, data: tracks = [] } =
        useGetProductTracks(productId);

    const handleCountries = (countries: CountryOption[]) => {
        setSelectedCountries(countries.map(c => c.value));
    };

    const handleConfirm = () => {
        // dummy profile to satisfy typing
        const dummyProfile = { profileId: '', profileType: '' };
        const tracks: Track[] = selectedTracks.map(t => ({
            tuid: t.tuid,
            rules: [
                ...t.rules,
                ...selectedCountries.map(c => ({
                    active: true,
                    createdDate: new Date().toString(),
                    lastModifiedDate: new Date().toString(),
                    createdBy: dummyProfile,
                    lastModifiedBy: dummyProfile,
                    policy: 'carveout',
                    service: defaultServiceValue.value,
                    territory: c,
                    start: null,
                    end: null,
                })),
            ],
        }));

        onRulesUpdated(tracks);
        onClose();
    };

    useEffect(() => {
        if (selectedTracks.length && selectedCountries.length) {
            setTrackWithRulesConflicts(
                getTracksWithConflictingRules(
                    selectedTracks,
                    selectedCountries,
                    [defaultServiceValue.value]
                )
            );
        }
        if (
            (!selectedTracks.length || !selectedCountries.length) &&
            trackWithRulesConflicts.length
        )
            setTrackWithRulesConflicts([]);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [selectedTracks, selectedCountries]);

    const isConfirmDisabled =
        trackWithRulesConflicts.length > 0 ||
        !selectedTracks.length ||
        !selectedCountries.length;

    const steps: Step[] = [
        {
            icon: {
                glyphIcon: 'circle',
                variant: 'neutral',
            },
            title: $t(
                'contentReview.addFingerprintRestriction.sidecar.trackTitle'
            ),
            body: getTracksStepContent(
                tracks,
                tracksLoading,
                setSelectedTracks
            ),
        },
        {
            icon: {
                glyphIcon: 'circle',
                variant: 'neutral',
            },
            title: $t(
                'contentReview.addFingerprintRestriction.sidecar.countryTitle'
            ),
            body: getCountriesStepContent(territories, handleCountries),
        },
        {
            icon: {
                glyphIcon: 'circle',
                variant: 'neutral',
            },
            title: $t(
                'contentReview.addFingerprintRestriction.sidecar.servicesTitle'
            ),
            body: getServicesStepContent(),
        },
    ];
    return (
        <Sidecar
            className={`${CLASS_NAME}-sidecar`}
            testId="sidecar"
            title={$t('contentReview.addFingerprintRestriction.sidecar.title')}
            isOpen={isOpen}
            onRequestClose={onClose}
            onConfirm={handleConfirm}
            confirmDisabled={isConfirmDisabled}
        >
            <div className={`${CLASS_NAME}-body`}>
                <div className={`${CLASS_NAME}-description`}>
                    {$t(
                        'contentReview.addFingerprintRestriction.sidecar.description'
                    )}
                </div>

                <Stepper layout="vertical" steps={steps} />

                {!!trackWithRulesConflicts.length && (
                    <Alert
                        className={`${CLASS_NAME}-conflict-alert`}
                        variant="error"
                        title={$t(
                            'contentReview.addFingerprintRestriction.sidecar.conflictTitle'
                        )}
                        text={
                            <span>
                                {$t(
                                    'contentReview.addFingerprintRestriction.sidecar.conflictText'
                                )}
                                <ul>
                                    {trackWithRulesConflicts.map(t => {
                                        return (
                                            <li key={t.tuid}>
                                                <a
                                                    href={`/catalog/digital-audio/${productId}/track/${t.tuid}/?tab=delivery`}
                                                    target="_blank"
                                                    rel="noreferrer"
                                                >
                                                    {t.trackName}
                                                </a>
                                            </li>
                                        );
                                    })}
                                </ul>
                            </span>
                        }
                    />
                )}
            </div>
        </Sidecar>
    );
};

export default AddFingerprintRestriction;