import { Button } from '@theorchard/suite-components';
import React from 'react';
import DeliveryStoreSelect from '../deliveryStoreSelect';
import type { FC } from 'react';
import type { DeliveryStore } from 'src/types';

export interface TimedReleaseStoreSelectorProps {
    onSelectSupported: (stores: DeliveryStore[]) => void;
    onSelectUnsupported: (store: DeliveryStore[]) => void;
    onNext: () => void;
    selectedSupported: DeliveryStore[];
    selectedUnsupported: DeliveryStore[];
    deliveryStores: DeliveryStore[];
    disabledStores: DeliveryStore[];
    carvedOutStores: DeliveryStore[];
}

const TimedReleaseStoreSelector: FC<TimedReleaseStoreSelectorProps> = ({
    onSelectSupported,
    onSelectUnsupported,
    onNext,
    selectedSupported,
    selectedUnsupported,
    deliveryStores,
    disabledStores,
    carvedOutStores,
}) => (
    <>
        <div className="TimedReleaseStoreSelector-prompt">
            {$t(
                'releaseScheduler.timedReleaseStoreSelector.selectServicesPrompt'
            )}
        </div>
        <DeliveryStoreSelect
            className="TimedReleaseStoreSelector-store-select-supported"
            title={$t(
                'releaseScheduler.timedReleaseStoreSelector.timedReleaseSupported'
            )}
            onSelect={onSelectSupported}
            selected={selectedSupported}
            deliveryStores={deliveryStores.filter(
                store => store.supportsTimedRelease
            )}
            disabledStores={disabledStores}
            disabledTooltip={$t(
                'releaseScheduler.timedReleaseStoreSelector.serviceInStaggeredTooltip'
            )}
            carvedOutStores={carvedOutStores}
            carvedOutTooltip={$t(
                'releaseScheduler.timedReleaseStoreSelector.serviceCarvedOutTooltip'
            )}
        />
        <DeliveryStoreSelect
            testId="select-unsupported"
            className="TimedReleaseStoreSelector-store-select-unsupported"
            title={$t(
                'releaseScheduler.timedReleaseStoreSelector.timedReleaseUnsupported'
            )}
            onSelect={onSelectUnsupported}
            selected={selectedUnsupported}
            deliveryStores={deliveryStores.filter(
                store => !store.supportsTimedRelease
            )}
            disabledStores={disabledStores}
            disabledTooltip={$t(
                'releaseScheduler.timedReleaseStoreSelector.serviceInStaggeredTooltip'
            )}
            carvedOutStores={carvedOutStores}
            carvedOutTooltip={$t(
                'releaseScheduler.timedReleaseStoreSelector.serviceCarvedOutTooltip'
            )}
        />
        <Button
            onClick={onNext}
            disabled={
                [...selectedSupported, ...selectedUnsupported].length === 0
            }
        >
            {$t('releaseScheduler.timedReleaseStoreSelector.next')}
        </Button>
    </>
);

export default TimedReleaseStoreSelector;