import {ToggleControl} from '@wordpress/components';
import {Fragment} from '@wordpress/element';
import {__} from '@wordpress/i18n';
import classnames from 'classnames';
import {FloColorPicker, FloTextControl, FloTypographySelect} from 'components';
import {getColorByValue} from 'components/color-picker/utils';
import {
	getDataFontForTypography,
	getStyleForTypography,
	LoadGoogleFonts,
} from 'components/typography-select/utils';
import './style.scss';

export function PostPaginationEdit(props) {
	const {attributes, setAttributes} = props;

	const {
		displayPagination,
		paginationElementsColor,
		paginationBackgroundColor,
		paginationLineColor,
		paginationDisplayNumbers,
		paginationNumbersTypography,
		previousLinkLabel,
		nextLinkLabel,
		paginationArrowsTypography,
	} = attributes;

	return (
		<Fragment>
			<ToggleControl
				label={__('Display Pagination')}
				checked={displayPagination}
				onChange={() =>
					setAttributes({
						displayPagination: !displayPagination,
						paginationMarkup: 'empty',
					})
				}
			/>
			{displayPagination && (
				<Fragment>
					<FloColorPicker
						title={__('Elements Color')}
						value={paginationElementsColor}
						onChange={(value) =>
							setAttributes({paginationElementsColor: value})
						}
					/>
					<FloColorPicker
						title={__('Background Color')}
						value={paginationBackgroundColor}
						onChange={(value) =>
							setAttributes({paginationBackgroundColor: value})
						}
					/>
					<FloColorPicker
						title={__('Line Color')}
						value={paginationLineColor}
						onChange={(value) => setAttributes({paginationLineColor: value})}
					/>
					<ToggleControl
						label={__('Display Numbers')}
						checked={paginationDisplayNumbers}
						onChange={() =>
							setAttributes({
								paginationDisplayNumbers: !paginationDisplayNumbers,
							})
						}
					/>
					{paginationDisplayNumbers && (
						<FloTypographySelect
							label={__('Numbers Typography')}
							value={paginationNumbersTypography}
							onChange={(value) =>
								setAttributes({paginationNumbersTypography: value})
							}
						/>
					)}
					<FloTextControl
						autoComplete="off"
						/*label={__('Previous Link Label')}*/
						placeholder={__('Previous Link Label')}
						value={previousLinkLabel}
						onChange={(value) => setAttributes({previousLinkLabel: value})}
					/>
					<FloTextControl
						autoComplete="off"
						/*label={__('Next Link Label')}*/
						placeholder={__('Next Link Label')}
						value={nextLinkLabel}
						onChange={(value) => setAttributes({nextLinkLabel: value})}
					/>
					<FloTypographySelect
						label={__('Prev/Next Links Typography')}
						value={paginationArrowsTypography}
						onChange={(value) =>
							setAttributes({paginationArrowsTypography: value})
						}
					/>
				</Fragment>
			)}
		</Fragment>
	);
}

export function PostPaginationView(props) {
	const {attributes} = props;

	const {
		displayPagination,
		paginationElementsColor,
		paginationBackgroundColor,
		paginationLineColor,
		paginationDisplayNumbers,
		paginationNumbersTypography,
		previousLinkLabel,
		nextLinkLabel,
		paginationArrowsTypography,
	} = attributes;
	return (
		<Fragment>
			{displayPagination === true && (
				<LoadGoogleFonts
					typographies={[
						paginationNumbersTypography,
						paginationArrowsTypography,
					]}
				/>
			)}
			{displayPagination === true && (
				<div
					className={classnames('flo-block-post-pagination')}
					style={{
						'--pagination-elements-color': getColorByValue(
							paginationElementsColor
						),
						'--pagination-background-color': getColorByValue(
							paginationBackgroundColor
						),
						'--pagination-line-color': getColorByValue(paginationLineColor),
						...getStyleForTypography(
							'pagination-arrows',
							paginationArrowsTypography
						),
						...getStyleForTypography(
							'pagination-numbers',
							paginationNumbersTypography
						),
					}}
				>
					<div
						className="flo-block-post-pagination__arrows flo-block-post-pagination__arrows--prev"
						data-font={getDataFontForTypography(paginationArrowsTypography)}
					>
						<a href="#">{previousLinkLabel}</a>
					</div>
					{paginationDisplayNumbers && (
						<div
							className="flo-block-post-pagination__numbers"
							data-font={getDataFontForTypography(paginationNumbersTypography)}
						>
							<span aria-current="page" className="page-numbers current">
								1
							</span>
							<a className="page-numbers" href="#">
								2
							</a>
							<a className="page-numbers" href="#">
								3
							</a>
							<a className="page-numbers" href="#">
								4
							</a>
						</div>
					)}
					<div
						className="flo-block-post-pagination__arrows flo-block-post-pagination__arrows--next"
						data-font={getDataFontForTypography(paginationArrowsTypography)}
					>
						<a href="#">{nextLinkLabel}</a>
					</div>
				</div>
			)}
		</Fragment>
	);
}
