import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { __ } from '@wordpress/i18n';
import React, { useState } from 'react';
import CourseFilterForBlocks from '../../../components/select-course/select-wrapper';
import { Color, Panel, Slider, Tab } from './../../../components';
import AdvanceSelect from './../../../components/advance-select';
import BorderSetting from './BorderSetting';
const theme = extendTheme({});

const BlockSettings = (props: any) => {
	const {
		attributes: {
			backgroundColor,
			textColor,
			alignment,
			fontSize,
			startCourseButtonBorder,
			courseId,
		},
		setAttributes,
	} = props;

	// State to control the Styles panel open/close
	const [isStylesPanelOpen, setIsStylesPanelOpen] = useState(true);

	return (
		<Tab tabTitle={__('Settings', 'learning-management-system')}>
			<Panel title={__('General', 'learning-management-system')} initialOpen>
				<ChakraProvider theme={theme} resetCSS>
					<CourseFilterForBlocks
						value={courseId}
						setAttributes={setAttributes}
						setCourseId={props.setSingleCourseId}
					/>
				</ChakraProvider>
			</Panel>

			<Panel
				title={__('Styles', 'learning-management-system')}
				isOpen={isStylesPanelOpen}
				onToggle={() => setIsStylesPanelOpen(!isStylesPanelOpen)}
			>
				<AdvanceSelect
					value={alignment}
					onChange={(val) => setAttributes({ alignment: val })}
					responsive={false}
					label={__('Alignment', 'learning-management-system')}
					options={[
						{
							label: __('Left', 'learning-management-system'),
							value: 'left',
							icon: 'text-align-left',
						},
						{
							label: __('Center', 'learning-management-system'),
							value: 'center',
							icon: 'text-align-center',
						},
						{
							label: __('Right', 'learning-management-system'),
							value: 'right',
							icon: 'text-align-right',
						},
						{
							label: __('Justify', 'learning-management-system'),
							value: 'justify',
							icon: 'text-align-justify',
						},
					]}
				/>
				<Color
					onChange={(val) => setAttributes({ textColor: val })}
					label={__('Color', 'learning-management-system')}
					value={textColor || ''}
				/>
				<Color
					onChange={(val) => setAttributes({ backgroundColor: val })}
					label={__('Background Color', 'learning-management-system')}
					value={backgroundColor || ''}
				/>
				<Slider
					value={fontSize}
					onChange={(val) => setAttributes({ fontSize: val })}
					responsive={false}
					min={0}
					max={100}
					inline={true}
					units={['px']}
					defaultUnit="px"
					label={__('Font Size', 'learning-management-system')}
				/>
				<BorderSetting
					value={startCourseButtonBorder}
					onChange={(val) => setAttributes({ startCourseButtonBorder: val })}
				/>
			</Panel>
		</Tab>
	);
};

export default BlockSettings;
