import { __ } from '@wordpress/i18n';
import { PanelBody, Button } from '@wordpress/components';
import { layout } from '@wordpress/icons';
import { useDevice } from '../../controls/DeviceContext';
import Display from './Display';
import DisplayHover from './DisplayHover';
import Alignment from './Alignment';
import AlignmentHover from './AlignmentHover';
import GridLayout from './Grid';
import GridLayoutHover from './GridHover';
import FlexLayout from './Flex';
import FlexLayoutHover from './FlexHover';
import Floats from './Floats';
import FloatsHover from './FloatsHover';

export default function LayoutControls({ attributes, setAttributes, activeStyleTab }) {
  const { activeDevice } = useDevice();

  const display = attributes.display || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
	const display__hover = attributes.display__hover || {
		desktop: '',
		tablet: '',
		mobile: ''
	};
  const alignItems = attributes.alignItems || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const alignItems__hover = attributes.alignItems__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const justifyContent = attributes.justifyContent || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const justifyContent__hover = attributes.justifyContent__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const justifyItems = attributes.justifyItems || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const justifyItems__hover = attributes.justifyItems__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const justifySelf = attributes.justifySelf || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const justifySelf__hover = attributes.justifySelf__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const alignSelf = attributes.alignSelf || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const alignSelf__hover = attributes.alignSelf__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const gridTemplateColumns = attributes.gridTemplateColumns || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const gridTemplateColumns__hover = attributes.gridTemplateColumns__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const gridTemplateRows = attributes.gridTemplateRows || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const gridTemplateRows__hover = attributes.gridTemplateRows__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const columnGap = attributes.columnGap || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const columnGap__hover = attributes.columnGap__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const rowGap = attributes.rowGap || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const rowGap__hover = attributes.rowGap__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const gridAutoFlow = attributes.gridAutoFlow || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const gridAutoFlow__hover = attributes.gridAutoFlow__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const gridColumn = attributes.gridColumn || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const gridColumn__hover = attributes.gridColumn__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const gridRow = attributes.gridRow || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const gridRow__hover = attributes.gridRow__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const order = attributes.order || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const order__hover = attributes.order__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const flexDirection = attributes.flexDirection || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const flexDirection__hover = attributes.flexDirection__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const flexWrap = attributes.flexWrap || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const flexWrap__hover = attributes.flexWrap__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const flexGrow = attributes.flexGrow || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const flexGrow__hover = attributes.flexGrow__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const flexShrink = attributes.flexShrink || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const flexShrink__hover = attributes.flexShrink__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const flexBasis = attributes.flexBasis || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const flexBasis__hover = attributes.flexBasis__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const float = attributes.float || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const float__hover = attributes.float__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const clear = attributes.clear || {
    desktop: '',
    tablet: '',
    mobile: '',
  };
  const clear__hover = attributes.clear__hover || {
    desktop: '',
    tablet: '',
    mobile: '',
  };

  const updateDeviceAttribute = (attribute, value) => {
    setAttributes({
      [attribute]: {
        ...attributes[attribute],
        [activeDevice]: value,
      },
    });
  };

  const resetLayout = () => {
    const resetAttributes = {
      display: { ...attributes.display, [activeDevice]: '' },
      alignItems: { ...attributes.alignItems, [activeDevice]: '' },
      justifyContent: { ...attributes.justifyContent, [activeDevice]: '' },
      justifyItems: { ...attributes.justifyItems, [activeDevice]: '' },
      justifySelf: { ...attributes.justifySelf, [activeDevice]: '' },
      alignSelf: { ...attributes.alignSelf, [activeDevice]: '' },
      gridTemplateColumns: { ...attributes.gridTemplateColumns, [activeDevice]: '' },
      gridTemplateRows: { ...attributes.gridTemplateRows, [activeDevice]: '' },
      columnGap: { ...attributes.columnGap, [activeDevice]: '' },
      rowGap: { ...attributes.rowGap, [activeDevice]: '' },
      gridAutoFlow: { ...attributes.gridAutoFlow, [activeDevice]: '' },
      gridColumn: { ...attributes.gridColumn, [activeDevice]: '' },
      gridRow: { ...attributes.gridRow, [activeDevice]: '' },
      order: { ...attributes.order, [activeDevice]: '' },
      flexDirection: { ...attributes.flexDirection, [activeDevice]: '' },
      flexWrap: { ...attributes.flexWrap, [activeDevice]: '' },
      flexGrow: { ...attributes.flexGrow, [activeDevice]: '' },
      flexShrink: { ...attributes.flexShrink, [activeDevice]: '' },
      flexBasis: { ...attributes.flexBasis, [activeDevice]: '' },
      float: { ...attributes.float, [activeDevice]: '' },
      clear: { ...attributes.clear, [activeDevice]: '' },
    };
    setAttributes(resetAttributes);
  };

	const resetLayoutHover = () => {
    const resetAttributes = {
      display__hover: { ...attributes.display__hover, [activeDevice]: '' },
      alignItems__hover: { ...attributes.alignItems__hover, [activeDevice]: '' },
      justifyContent__hover: { ...attributes.justifyContent__hover, [activeDevice]: '' },
      justifyItems__hover: { ...attributes.justifyItems__hover, [activeDevice]: '' },
      justifySelf__hover: { ...attributes.justifySelf__hover, [activeDevice]: '' },
      alignSelf__hover: { ...attributes.alignSelf__hover, [activeDevice]: '' },
      gridTemplateColumns__hover: { ...attributes.gridTemplateColumns__hover, [activeDevice]: '' },
      gridTemplateRows__hover: { ...attributes.gridTemplateRows__hover, [activeDevice]: '' },
      columnGap__hover: { ...attributes.columnGap__hover, [activeDevice]: '' },
      rowGap__hover: { ...attributes.rowGap__hover, [activeDevice]: '' },
      gridAutoFlow__hover: { ...attributes.gridAutoFlow__hover, [activeDevice]: '' },
      gridColumn__hover: { ...attributes.gridColumn__hover, [activeDevice]: '' },
      gridRow__hover: { ...attributes.gridRow__hover, [activeDevice]: '' },
      order__hover: { ...attributes.order__hover, [activeDevice]: '' },
      flexDirection__hover: { ...attributes.flexDirection__hover, [activeDevice]: '' },
      flexWrap__hover: { ...attributes.flexWrap__hover, [activeDevice]: '' },
      flexGrow__hover: { ...attributes.flexGrow__hover, [activeDevice]: '' },
      flexShrink__hover: { ...attributes.flexShrink__hover, [activeDevice]: '' },
      flexBasis__hover: { ...attributes.flexBasis__hover, [activeDevice]: '' },
      float__hover: { ...attributes.float__hover, [activeDevice]: '' },
      clear__hover: { ...attributes.clear__hover, [activeDevice]: '' },
    };
    setAttributes(resetAttributes);
  };

  return (
    <PanelBody
      className="layout-controls-wrapper"
      title={
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
					{activeStyleTab === 'main' && (
						<span className="title">
							{layout}
							{__('Layout', 'axcelersblocks')}
						</span>
					)}
					{activeStyleTab === 'mainHover' && (
						<span className="title">
							{layout}
							{__('Layout (Hover)', 'axcelersblocks')}
						</span>
					)}
        </div>
      }
      initialOpen={false}
    >
			{activeStyleTab === 'main' && (
				<>
					<Display
						activeDevice={activeDevice}
						display={display}
						updateDeviceAttribute={updateDeviceAttribute}
					/>
					<Alignment
						activeDevice={activeDevice}
						alignItems={alignItems}
						justifyContent={justifyContent}
						justifyItems={justifyItems}
						justifySelf={justifySelf}
						alignSelf={alignSelf}
						updateDeviceAttribute={updateDeviceAttribute}
					/>
					<GridLayout
						activeDevice={activeDevice}
						gridTemplateColumns={gridTemplateColumns}
						gridTemplateRows={gridTemplateRows}
						columnGap={columnGap}
						rowGap={rowGap}
						gridAutoFlow={gridAutoFlow}
						gridColumn={gridColumn}
						gridRow={gridRow}
						order={order}
						updateDeviceAttribute={updateDeviceAttribute}
					/>
					<FlexLayout
						activeDevice={activeDevice}
						flexDirection={flexDirection}
						flexWrap={flexWrap}
						columnGap={columnGap}
						rowGap={rowGap}
						flexGrow={flexGrow}
						flexShrink={flexShrink}
						flexBasis={flexBasis}
						order={order}
						updateDeviceAttribute={updateDeviceAttribute}
					/>
					<Floats
						activeDevice={activeDevice}
						float={float}
						clear={clear}
						updateDeviceAttribute={updateDeviceAttribute}
					/>
					<Button
						className="reset-btn"
						onClick={resetLayout}
						label={__('Reset', 'axcelersblocks')}
						showTooltip={true}
					>
						{__('Reset', 'axcelersblocks')}
					</Button>
				</>
			)}
			{activeStyleTab === 'mainHover' && (
				<>
					<DisplayHover
						activeDevice={activeDevice}
						display__hover={display__hover}
						updateDeviceAttribute={updateDeviceAttribute}
					/>
					<AlignmentHover
						activeDevice={activeDevice}
						alignItems__hover={alignItems__hover}
						justifyContent__hover={justifyContent__hover}
						justifyItems__hover={justifyItems__hover}
						justifySelf__hover={justifySelf__hover}
						alignSelf__hover={alignSelf__hover}
						updateDeviceAttribute={updateDeviceAttribute}
					/>
					<GridLayoutHover
						activeDevice={activeDevice}
						gridTemplateColumns__hover={gridTemplateColumns__hover}
						gridTemplateRows__hover={gridTemplateRows__hover}
						columnGap__hover={columnGap__hover}
						rowGap__hover={rowGap__hover}
						gridAutoFlow__hover={gridAutoFlow__hover}
						gridColumn__hover={gridColumn__hover}
						gridRow__hover={gridRow__hover}
						order__hover={order__hover}
						updateDeviceAttribute={updateDeviceAttribute}
					/>
					<FlexLayoutHover
						activeDevice={activeDevice}
						flexDirection__hover={flexDirection__hover}
						flexWrap__hover={flexWrap__hover}
						columnGap__hover={columnGap__hover}
						rowGap__hover={rowGap__hover}
						flexGrow__hover={flexGrow__hover}
						flexShrink__hover={flexShrink__hover}
						flexBasis__hover={flexBasis__hover}
						order__hover={order__hover}
						updateDeviceAttribute={updateDeviceAttribute}
					/>
					<FloatsHover
						activeDevice={activeDevice}
						float__hover={float__hover}
						clear__hover={clear__hover}
						updateDeviceAttribute={updateDeviceAttribute}
					/>
					<Button
						className="reset-btn"
						onClick={resetLayoutHover}
						label={__('Reset', 'axcelersblocks')}
						showTooltip={true}
					>
						{__('Reset', 'axcelersblocks')}
					</Button>
				</>
			)}
    </PanelBody>
  );
}
