import { useMemo } from 'react';
import { Flex, Link, FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
import { Details, DetailsContext, DetailsList } from '@pega/cosmos-react-work';
import { TableDemo } from '../../core/Table/Table.stories';
export default {
    title: 'Work/Details',
    component: Details,
    args: {
        description: 'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.',
        collapsible: false,
        defaultCollapsed: false,
        showAdditionalInfo: false
    },
    argTypes: {
        description: { control: { type: 'text' } },
        collapsible: { control: { type: 'boolean' } },
        showAdditionalInfo: { control: { type: 'boolean' } },
        defaultCollapsed: { control: { type: 'boolean' } }
    }
};
export const DetailsDemo = (args) => {
    const isNotMobile = useBreakpoint('sm');
    const longestInlineLabel = 'Trim with a longer label';
    const longestLabelLength = longestInlineLabel.split(' ').join('').length;
    const ctx = useMemo(() => ({
        mobileView: !isNotMobile,
        longestLabelLength
    }), [isNotMobile]);
    return (<DetailsContext.Provider value={ctx}>
      <Details name='Upper list' highlightedData={[
            <FieldValueItem variant='stacked' name='Age' value='56'/>,
            <FieldValueItem variant='stacked' name='Location' value='Berlin'/>,
            <FieldValueItem variant='stacked' name='Make' value='Ford'/>,
            <FieldValueItem variant='stacked' name='Model' value='F150'/>
        ]} description={args.description} collapsible={args.collapsible} defaultCollapsed={args.defaultCollapsed} additionalInfo={args.showAdditionalInfo
            ? {
                content: (<Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>
                    <p>
                      Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore
                      magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent
                      semper feugiat nibh sed pulvinar proin gravida.
                    </p>
                    <p>
                      Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit
                      egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim
                      nulla aliquet porttitor lacus.
                    </p>
                    <Link href='/' target='_blank'>
                      Neque vitae
                    </Link>
                  </Flex>)
            }
            : undefined} columns={{
            a: (<>
              <Details name='One Column' columns={{
                    a: (<Details description='Two column with no headings.' columns={{
                            a: (<Details columns={{
                                    a: (<DetailsList items={[
                                            { name: 'Year', value: '2021' },
                                            { name: 'Owners', value: '2' }
                                        ]}/>)
                                }}/>),
                            b: (<Details columns={{
                                    a: (<DetailsList items={[
                                            { name: 'Transmission', value: 'Automatic' },
                                            { name: 'Drivetrain', value: 'AWD' }
                                        ]}/>)
                                }}/>)
                        }}/>)
                }} collapsible defaultCollapsed/>

              <Details description='Two Column with some description and no top heading.' columns={{
                    a: (<Details name='First Column' columns={{
                            a: (<DetailsList items={[
                                    { name: 'Make', value: 'Ford' },
                                    { name: 'Model', value: 'F150' }
                                ]}/>)
                        }}/>),
                    b: (<Details name='Second Column' columns={{
                            a: (<DetailsList items={[
                                    { name: 'Mileage', value: '78,500' },
                                    { name: 'Trim', value: 'Lariat' }
                                ]}/>)
                        }}/>)
                }}/>

              <Details name='Three Column' description='Text telling you what you are looking at or why it is relevant.' columns={{
                    a: (<Details name='First Column' columns={{
                            a: (<DetailsList items={[
                                    { name: 'Make', value: 'Ford' },
                                    { name: 'Model', value: 'F150' }
                                ]}/>)
                        }}/>),
                    b: (<Details description='Column with no heading but some description.' columns={{
                            a: (<DetailsList items={[
                                    { name: 'Mileage', value: '78,500' },
                                    { name: longestInlineLabel, value: 'Lariat' }
                                ]}/>)
                        }}/>),
                    c: (<Details name='Third Column' columns={{
                            a: (<DetailsList items={[
                                    { name: 'Mileage', value: '78,500' },
                                    { name: 'Trim', value: 'Lariat' }
                                ]}/>)
                        }}/>)
                }}/>

              <Details name='Wide Narrow' arrangement='wideNarrow' columns={{
                    a: <Details name='Wide Column' columns={{ a: <TableDemo /> }}/>,
                    b: (<Details name='Narrow Column' columns={{
                            a: (<DetailsList items={[
                                    { name: 'Mileage', value: '78,500' },
                                    { name: 'Trim', value: 'Lariat' }
                                ]}/>)
                        }}/>)
                }}/>

              <Details name='Narrow Wide' arrangement='narrowWide' columns={{
                    a: (<Details name='Narrow Column' columns={{
                            a: (<DetailsList items={[
                                    { name: 'Mileage', value: '78,500' },
                                    { name: 'Trim', value: 'Lariat' }
                                ]}/>)
                        }}/>),
                    b: <Details name='Wide Column' columns={{ a: <TableDemo /> }}/>
                }}/>

              <Details name='Table' columns={{ a: <TableDemo /> }}/>

              <Details name='Nested List 1 Column' columns={{
                    a: (<>
                      <Details name='First Child' columns={{
                            a: (<DetailsList items={[
                                    { name: 'Year', value: '2021' },
                                    { name: 'Owners', value: '2' }
                                ]}/>)
                        }}/>

                      <Details name='Second Child' columns={{
                            a: (<DetailsList items={[
                                    { name: 'Transmission', value: 'Automatic' },
                                    { name: 'Drivetrain', value: 'AWD' }
                                ]}/>)
                        }}/>
                    </>)
                }}/>

              <Details columns={{
                    a: (<>
                      <DetailsList items={[
                            {
                                name: 'Description',
                                variant: 'stacked',
                                value: (<p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
                                commodo nulla vitae mi bibendum, a fringilla nisl efficitur.
                                Praesent vitae nulla lobortis, finibus felis ultricies, fermentum
                                mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque
                                est. Pellentesque pharetra justo augue, non maximus nulla venenatis
                                et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum
                                semper fringilla in eget risus. Fusce cursus sollicitudin nibh
                                molestie volutpat.
                              </p>)
                            },
                            { name: 'Keys', value: '3' }
                        ]}/>

                      <Details name='Nested' columns={{
                            a: (<>
                              <DetailsList items={[
                                    { name: 'First name', value: 'Howard' },
                                    { name: 'Last name', value: 'Kennedy' }
                                ]}/>

                              <Details name='Further Nested List' columns={{
                                    a: (<DetailsList items={[
                                            { name: 'Color', value: 'Red' },
                                            { name: 'Tires', value: 'Firestone all weather' }
                                        ]}/>)
                                }}/>
                            </>)
                        }}/>

                      <Details name='Value comparison' columns={{
                            a: (<DetailsList items={[
                                    { name: 'Open', value: '$405.00' },
                                    { name: 'Close', value: '$401.00' },
                                    { name: '52 week high', value: '$446.00' },
                                    { name: '52 week low', value: '$335.00' },
                                    { name: 'Total number of active shares', value: '567,000.00' }
                                ]} valueComparison/>)
                        }}/>

                      <Details name='Collapsible' columns={{
                            a: (<DetailsList items={[
                                    { name: 'Open', value: '$405.00' },
                                    { name: 'Close', value: '$401.00' },
                                    { name: '52 week high', value: '$446.00' },
                                    { name: '52 week low', value: '$335.00' },
                                    { name: 'Total number of active shares', value: '567,000.00' }
                                ]} valueComparison/>)
                        }} collapsible defaultCollapsed/>

                      <Details columns={{
                            a: (<DetailsList items={[
                                    { name: 'Age', value: '56' },
                                    { name: 'Location', value: 'Berlin PA' }
                                ]}/>)
                        }}/>
                    </>)
                }}/>
            </>)
        }}/>
    </DetailsContext.Provider>);
};
//# sourceMappingURL=Details.stories.jsx.map