import { __ } from '@wordpress/i18n';
import {
	TextStyles,
	NumberStyles,
	ButtonStyles,
	BlockStyles,
	RoundupExample,
} from '../partials';
import {
	SelectInput,
	ToggleInput,
	SettingsGroup,
	TabletSaveButton,
	ShareASaleInput,
	useForm,
} from '@library';
import '../../scss/settings.scss';

const globalSettings = window.tastyRoundupsSettings.customizations;

export const Settings = () => {
	const { formData, handleChange } = useForm( {
		blockBackgroundColor: globalSettings.block_background_color,
		blockBorderColor: globalSettings.block_border_color,
		blockBorderRadius: globalSettings.block_border_radius,
		blockBorderWidth: globalSettings.block_border_width,
		buttonBackgroundColor: globalSettings.button_background_color,
		buttonBorderRadius: globalSettings.button_border_radius,
		buttonText: globalSettings.button_text,
		buttonTextColor: globalSettings.button_text_color,
		headingColor: globalSettings.heading_color,
		textColor: globalSettings.text_color,
		mediaPosition: globalSettings.media_position,
		numberBackgroundColor: globalSettings.number_background_color,
		numberBorderColor: globalSettings.number_border_color,
		numberBorderWidth: globalSettings.number_border_width,
		numberTextColor: globalSettings.number_text_color,
		numbers: globalSettings.numbers,
		shareasaleAffiliateId: globalSettings.shareasale_affiliate_id,
	} );

	return (
		<div className="tasty-settings-two-columns">
			<div className="tasty-settings-column">
				<RoundupExample formData={ formData } />
			</div>
			<div className="tasty-settings-column">
				<SelectInput
					label={ __( 'Default Style', 'tasty-roundups' ) }
					name="tasty_roundups_settings[media_position]"
					id="tasty-roundups-default-style"
					options={ [
						{
							value: 'left',
							label: __( 'Left Align', 'tasty-roundups' ),
							selected: formData.mediaPosition === 'left',
						},
						{
							value: 'top',
							label: __( 'Top Align', 'tasty-roundups' ),
							selected: formData.mediaPosition === 'top',
						},
						{
							value: 'right',
							label: __( 'Right Align', 'tasty-roundups' ),
							selected: formData.mediaPosition === 'right',
						},
					] }
					handleChange={ ( value ) =>
						handleChange( 'mediaPosition', value )
					}
				/>
				<ToggleInput
					label={ __( 'Display Numbers', 'tasty-roundups' ) }
					id="tasty-roundups-display-numbers"
					name="tasty_roundups_settings[numbers]"
					value={ formData.numbers }
					setValue={ ( value ) => {
						handleChange( 'numbers', value );
					} }
				/>
				<SettingsGroup label={ __( 'Text Styles', 'tasty-roundups' ) }>
					<TextStyles
						formData={ formData }
						handleChange={ handleChange }
					/>
				</SettingsGroup>
				<SettingsGroup
					label={ __( 'Number Styles', 'tasty-roundups' ) }
				>
					<NumberStyles
						formData={ formData }
						handleChange={ handleChange }
					/>
				</SettingsGroup>
				<SettingsGroup
					label={ __( 'Button Styles', 'tasty-roundups' ) }
				>
					<ButtonStyles
						formData={ formData }
						handleChange={ handleChange }
					/>
				</SettingsGroup>
				<SettingsGroup label={ __( 'Block Styles', 'tasty-roundups' ) }>
					<BlockStyles
						formData={ formData }
						handleChange={ handleChange }
					/>
				</SettingsGroup>
				<ShareASaleInput
					id="tasty-roundups-shareasale-affiliate-id"
					name="tasty_roundups_settings[shareasale_affiliate_id]"
					value={ formData.shareasaleAffiliateId }
					setValue={ ( value ) => {
						handleChange( 'shareasaleAffiliateId', value );
					} }
				/>
				<TabletSaveButton />
			</div>
		</div>
	);
};
