import $ from 'jquery';
import { close_modal } from './close_modal';
import { generate_popup_html } from './generate_popup_html';
import { get_service_options_data } from './get_service_options_data';
import { get_option_html } from './get_option_html';

export type service_option = { name: string, service_id: string }

export const open_choose_return_service_popup = ( order_id: string ): void => {
	$( '.choose-return-service' ).remove();
	const popup_html: string = generate_popup_html( order_id );
	const popup: JQuery<HTMLElement> = $( popup_html );
	const options: service_option[] = get_service_options_data();
	const option_html: string = get_option_html( options );
	popup.find( '.return-service__list' ).append( $( option_html ) );
	popup.hide();

	$( 'body' ).append( popup );

	// @ts-ignore
	tb_show( '#' + order_id + ' - ' + window._wetail_shipping.i18n[ 'Select return service' ], '/?TB_inline&inlineId=choose-return-service' );

	const TBWindow = $( '.return-service' ).parents( '#TB_window' );
	TBWindow.attr( 'data-order_id', order_id );
	TBWindow.wrap( '<div class="tb-return-service"></div>' );
	// @ts-ignore
	$("#TB_closeWindowButton").off( 'click', tb_remove ).on( 'click', close_modal );

	$( '#TB_window' ).on( 'tb_unload', function() {
		$( '.tb-return-service' ).remove();
	} );
};
