import React, { useMemo } from 'react';
import tw from 'twin.macro';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import FirewallRulesEditor, { GEO_RULE_TYPE } from './firewallRulesEditor';
import { WarningIcon } from './firewallIcons';
import type { FirewallRuleRecord } from './firewallTypes';

type Props = {
    rules: FirewallRuleRecord[];
    base: string;
    canMutate: boolean;
    onChanged: () => void;
    onError: (msg: string) => void;
    onApply?: (force?: boolean) => void;
    applyEnabled?: boolean;
    applying?: boolean;
    /** Primary + extra allocation ports for per-port geo rules */
    allocatedPorts?: number[];
};

export default ({
    rules,
    base,
    canMutate,
    onChanged,
    onError,
    onApply,
    applyEnabled,
    applying,
    allocatedPorts = [],
}: Props) => {
    const geoRules = useMemo(() => rules.filter((r) => r.rule_type === 'geo_filter'), [rules]);

    return (
        <div>
            <div css={tw`mb-4`}>
                <TitledGreyBox title={'GeoIP requirements'}>
                    <div css={tw`flex items-start gap-2`}>
                        <WarningIcon css={tw`w-4 h-4 text-yellow-400 flex-none mt-0.5`} title="Requirements" />
                        <ul css={tw`text-sm text-neutral-400 space-y-2 list-disc list-inside`}>
                            <li>Install a MaxMind GeoLite2 / GeoIP database on the Wings host running the firewall node service.</li>
                            <li>Point the node at the database path in its configuration before enabling geo blocking.</li>
                            <li>Apply will fail on the node if geo filter is enabled without a valid database.</li>
                        </ul>
                    </div>
                </TitledGreyBox>
            </div>

            <FirewallRulesEditor
                catalog={[GEO_RULE_TYPE]}
                rules={geoRules}
                base={base}
                canMutate={canMutate}
                onChanged={onChanged}
                onError={onError}
                onApply={onApply}
                applyEnabled={applyEnabled}
                applying={applying}
                allocatedPorts={allocatedPorts}
                columns={1}
            />
        </div>
    );
};