import { __, _n, sprintf } from '@wordpress/i18n';
import { useSettings } from '../../contexts/SettingsContext';
import { getSettingsUi, isTrue, isVendorPage } from '../../Helpers';
import useProGate from '../../hooks/useProGate';
import SettingRow, { NewBadge } from '../../components/SettingRow';
import Toggle from '../../components/Toggle';
import CustomFieldSelect from '../../components/CustomFieldSelect';
import AttributePicker from './AttributePicker';
import ProductImagesSection from './ProductImagesSection';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';

// "Google Sheet columns" card, in the same order as the removed templates/dashboard/settings.php.
const ColumnsSection = () => {
	const { options, updateOption } = useSettings();
	const { isPro } = useProGate();
	const { custom_fields: customFields = [], ult_flags: ultFlags = {} } = getSettingsUi();
	const selectedFields = Array.isArray( options.show_custom_fileds ) ? options.show_custom_fileds : [];

	return (
		<div className="ssgs-dashboard__block">
			<h4 className="title">{ __( 'Google Sheet columns', TEXT_DOMAIN ) }</h4>

			{ /* SKU is required to match products (MultiStore), so it is always on. */ }
			<div className="form-group ssgsw-row-locked">
				<label htmlFor="ssgsw-show_sku">
					<Toggle id="ssgsw-show_sku" name="show_sku" checked disabled onChange={ () => {} } describedBy="ssgsw-desc-show_sku" />
					<span className="label-text">{ __( 'Sync SKU', TEXT_DOMAIN ) }</span>
					<span className="ssgs-badge gray">{ __( 'Always on', TEXT_DOMAIN ) }</span>
				</label>
				<div className="description" id="ssgsw-desc-show_sku">
					<p>{ __( 'Enable this button to show the short SKU of the product in a column on the Google Sheets', TEXT_DOMAIN ) }</p>
				</div>
			</div>

			<SettingRow
				name="show_short_description"
				label={ __( 'Sync short description', TEXT_DOMAIN ) }
				pro
				description={ __( 'Enable this button to show the short description of the product in a column on the Google Sheets', TEXT_DOMAIN ) }
			/>

			{ ultFlags.long_description && (
				<SettingRow
					name="show_long_description"
					label={ __( 'Sync Long description', TEXT_DOMAIN ) }
					pro
					description={ __( 'Enable this button to show the long description of the product in a column on the Google Sheets', TEXT_DOMAIN ) }
				/>
			) }

			<SettingRow
				name="show_attributes"
				label={ __( 'Display attributes', TEXT_DOMAIN ) }
				pro
				description={ __( 'Enable this button to show the product attributes in a column on the Google Sheets', TEXT_DOMAIN ) }
			/>
			{ isTrue( options.show_attributes ) && isPro && <AttributePicker /> }

			<SettingRow
				name="show_total_sales"
				label={ __( 'Display product sales count', TEXT_DOMAIN ) }
				pro
				description={ __( 'Enable this feature to display the total sales count of the products in a column on the Google Sheets', TEXT_DOMAIN ) }
			/>

			<ProductImagesSection />

			<SettingRow
				name="show_upsell_ids"
				label={ __( 'Upsells', TEXT_DOMAIN ) }
				pro
				badges={ <NewBadge /> }
				description={ __( 'Sync and manage upsell products from Google Sheets.', TEXT_DOMAIN ) }
			/>
			<SettingRow
				name="show_crosssell_ids"
				label={ __( 'Cross-sells', TEXT_DOMAIN ) }
				pro
				badges={ <NewBadge /> }
				description={ __( 'Sync and manage cross-sell products from Google Sheets.', TEXT_DOMAIN ) }
			/>
			<SettingRow
				name="show_custom_badge"
				label={ __( 'Product Badge', TEXT_DOMAIN ) }
				pro
				badges={ <NewBadge /> }
				description={ __( 'Sync and manage product badges from Google Sheets.', TEXT_DOMAIN ) }
			/>
			<SettingRow
				name="show_product_brand"
				label={ __( 'Product Brands', TEXT_DOMAIN ) }
				pro
				badges={ <NewBadge /> }
				description={ __( 'Sync and manage product brands from Google Sheets.', TEXT_DOMAIN ) }
			/>

			{ ultFlags.product_url && (
				<SettingRow
					name="show_product_url"
					label={ __( 'Display product URL', TEXT_DOMAIN ) }
					pro
					description={ __( 'Enable this feature to show the product URL in the Google Sheet', TEXT_DOMAIN ) }
				/>
			) }

			<SettingRow
				name="show_product_category"
				label={ __( 'Display product category', TEXT_DOMAIN ) }
				pro
				description={ __( 'Enable this button to show the category of the product in a column on the Google Sheets', TEXT_DOMAIN ) }
			/>
			<SettingRow
				name="show_product_tags"
				label={ __( 'Display product tags', TEXT_DOMAIN ) }
				pro
				description={ __( 'Enable this button to show the tags of the product in a column on the Google Sheets', TEXT_DOMAIN ) }
			/>

			<SettingRow
				name="show_custom_meta_fileds"
				label={ __( 'Sync Custom Fields', TEXT_DOMAIN ) }
				labelClass="ssgs_custom_fileds"
				pro
				description={ __( "Enter or search your product's custom field (meta data) and enable them to display on the Spreadsheet as columns.", TEXT_DOMAIN ) }
			>
				{ isTrue( options.show_custom_meta_fileds ) && isPro && (
					<div className="ssgsw_description">
						<CustomFieldSelect fields={ customFields } selected={ selectedFields } onChange={ ( keys ) => updateOption( 'show_custom_fileds', keys ) } />
						<p className="ssgsw-field-select__hint">
							{ sprintf(
								/* translators: %d: number of selected custom fields. */
								_n( '%d custom field will be added as a column.', '%d custom fields will be added as columns.', selectedFields.length, TEXT_DOMAIN ),
								selectedFields.length
							) }
						</p>
					</div>
				) }
			</SettingRow>

			<SettingRow
				name="show_product_status"
				label={ __( 'Sync Product Status', TEXT_DOMAIN ) }
				labelClass="show_product_status"
				pro
				description={ __( 'Enable this button to show the Status of the product in a column on the Google Sheets.', TEXT_DOMAIN ) }
			/>

			{ ultFlags.shop_name_sync && ! isVendorPage() && (
				<SettingRow
					name="shop_name_sync"
					label={ __( 'Display Shop/ Vendor Name', TEXT_DOMAIN ) }
					pro
					description={ __( 'Enable this feature to show the Shop/vendor name in the Google Sheet', TEXT_DOMAIN ) }
				/>
			) }
		</div>
	);
};

export default ColumnsSection;