import { useState } from 'react';
import { Button, Configuration, resetToInitial, Flex, Checkbox, RadioButton, DateInput, SearchInput, Text } from '@pega/cosmos-react-core';
import { FormContent } from '../Form/Form.mocks';
import { buttonStyles, StyledFieldset } from './Configuration.styles';
import { FlipFlop } from './Configuration.mocks';
export default {
    title: 'Core/Configuration',
    component: Configuration,
    excludeStories: [
        'ConfigurableBaseTheme',
        'ConfigurableComponentTheme',
        'ConfigurableLocale',
        'ConfigurableTranslations'
    ]
};
export const ThemedForm = (args) => {
    const themes = {
        default: {},
        theme1: {
            base: {
                palette: {
                    interactive: '#AC75F0'
                }
            },
            components: {
                button: {
                    'border-radius': 1
                },
                'form-control': {
                    'background-color': '#80008033',
                    'border-color': 'purple'
                },
                input: {
                    height: '50px'
                }
            }
        }
    };
    return (<Configuration theme={themes[args.theme]}>
      <FormContent cols={1} showActions={false}/>
    </Configuration>);
};
ThemedForm.args = {
    theme: 'default'
};
ThemedForm.argTypes = {
    theme: { options: ['default', 'theme1'], control: { type: 'select' } }
};
export const ThemingHierarchy = () => {
    const [redOrOrange, setRedOrOrange] = useState(true);
    const [greenOrPurple, setGreenOrPurple] = useState(true);
    return (<StyledFieldset style={{ margin: 0, textAlign: 'center' }}>
      <legend>Initial Theme</legend>
      <Button style={buttonStyles} variant='primary'>
        Base interactive
      </Button>
      <StyledFieldset>
        <legend>Override Interactive to</legend>
        <Configuration theme={{
            base: {
                palette: {
                    interactive: redOrOrange ? 'red' : 'darkorange'
                }
            }
        }}>
          <Button style={buttonStyles} variant='primary' onClick={() => setRedOrOrange(val => !val)}>
            <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange'/>
          </Button>
          <StyledFieldset>
            <legend>Override Button Primary BG to</legend>
            <Configuration theme={{
            components: {
                button: { color: greenOrPurple ? 'green' : 'purple' }
            }
        }}>
              <Button style={buttonStyles} variant='primary' onClick={() => setGreenOrPurple(val => !val)}>
                <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple'/>
              </Button>
              <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>
                Secondary still inherits interactive
              </Button>
              <StyledFieldset>
                <legend>Reset Button BG</legend>
                <Configuration theme={{
            components: { button: { color: resetToInitial } }
        }}>
                  <Button style={buttonStyles} variant='primary'>
                    Inherited from interactive
                  </Button>
                  <StyledFieldset>
                    <legend>Reset Interactive</legend>
                    <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>
                      <Button style={buttonStyles} variant='primary'>
                        Inherited from base
                      </Button>
                    </Configuration>
                  </StyledFieldset>
                </Configuration>
              </StyledFieldset>
            </Configuration>
          </StyledFieldset>
        </Configuration>
      </StyledFieldset>
    </StyledFieldset>);
};
export const ConfigurableBaseTheme = (args) => {
    return (<Configuration theme={{
            base: {
                palette: {
                    interactive: args.interactive
                }
            }
        }}>
      <Flex container={{ gap: 2, justify: 'start' }}>
        <Button variant='primary'>Primary</Button>
        <Flex item={{ shrink: 1, alignSelf: 'center' }}>
          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked/>
        </Flex>
        <RadioButton id='radio-button' label='Radio Option' defaultChecked/>
      </Flex>
    </Configuration>);
};
ConfigurableBaseTheme.args = {
    interactive: '#681fc3'
};
ConfigurableBaseTheme.argTypes = {
    interactive: { control: { type: 'color' } }
};
export const ConfigurableComponentTheme = (args) => {
    return (<Configuration theme={{
            components: {
                button: {
                    color: args.buttonColor
                },
                'radio-check': {
                    ':checked': {
                        'background-color': args.checkedBackgroundColor
                    }
                }
            }
        }}>
      <Flex container={{ gap: 2, justify: 'start' }}>
        <Button variant='primary'>Primary</Button>
        <Flex item={{ shrink: 1, alignSelf: 'center' }}>
          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked/>
        </Flex>
        <RadioButton id='radio-button' label='Radio Option' defaultChecked/>
      </Flex>
    </Configuration>);
};
ConfigurableComponentTheme.args = {
    buttonColor: '#681fc3',
    checkedBackgroundColor: '#20aa50'
};
ConfigurableComponentTheme.argTypes = {
    buttonColor: { control: { type: 'color' } },
    checkedBackgroundColor: { control: { type: 'color' } }
};
export const ConfigurableLocale = (args) => {
    return (<Configuration locale={args.locale}>
      <Flex container={{ direction: 'column', gap: 2 }}>
        <DateInput label='Date Input with locale support' value={new Date()}/>
      </Flex>
    </Configuration>);
};
ConfigurableLocale.args = {
    locale: 'en-US'
};
ConfigurableLocale.argTypes = {
    locale: { options: ['en-US', 'pl', 'fr', 'hu', 'de-DE'], control: { type: 'select' } }
};
export const ConfigurableTranslations = (args) => {
    const spanishTranslation = {
        search_placeholder_default: args.placeholderTranslation
    };
    return (<Flex container={{ gap: 4 }}>
      <Flex container={{ direction: 'column' }}>
        <Text variant='h4'>Default</Text>
        <SearchInput />
      </Flex>

      <Configuration translations={spanishTranslation}>
        <Flex container={{ direction: 'column' }}>
          <Text variant='h4'>Translated</Text>
          <SearchInput />
        </Flex>
      </Configuration>
    </Flex>);
};
ConfigurableTranslations.args = {
    placeholderTranslation: 'Buscar...'
};
ConfigurableTranslations.argTypes = {
    placeholderTranslation: { control: { type: 'text' } }
};
//# sourceMappingURL=Configuration.stories.jsx.map