import * as React from 'react'
import type { StoryObj, Meta, StoryFn } from '@storybook/react-webpack5'
import { GridCellDefault } from '.'
import { Avatar as UIAvatar } from '@planview/pv-uikit'
import { Calendar, Globe } from '@planview/pv-icons'
import { theme } from '@planview/pv-utilities'
import { CellBoundsPreview } from '../../docs/helpers'

export default {
    title: 'pv-grid/Components/Cells/GridCellDefault',
    tags: ['autodocs'],
    component: GridCellDefault,
    parameters: {
        badges: ['intl'],
    },
    args: {
        icon: 'no icon' as any,
        avatar: 'no avatar' as any,
        badge: 'no badge' as any,
    },
    argTypes: {
        icon: {
            control: { type: 'radio' },
            options: ['no icon', 'with icon', 'with coloured icon'],
            mapping: {
                'no icon': undefined,
                'with icon': <Calendar color={theme.iconNormal} />,
                'with coloured icon': <Calendar color={theme.iconWarning} />,
            },
        },
        avatar: {
            control: { type: 'radio' },
            options: ['no avatar', 'with avatar'],
            mapping: {
                'no avatar': undefined,
                'with avatar': <UIAvatar initials="MP" />,
            },
        },
        badge: {
            control: { type: 'radio' },
            options: ['no badge', 'with badge'],
            mapping: {
                'no badge': undefined,
                'with badge': 10,
            },
        },
        href: {
            options: ['no href', 'href as string', 'href as object'],
            mapping: {
                'no href': undefined,
                'href as string': 'http://www.planview.com',
                'href as object': {
                    url: 'http://www.planview.com',
                    target: '_blank',
                    rel: 'noopener noreferrer',
                },
            },
            control: {
                type: 'radio',
            },
        },
    },
    decorators: [(Story) => <CellBoundsPreview>{Story()}</CellBoundsPreview>],
} satisfies Meta<typeof GridCellDefault>

type Story = StoryObj<typeof GridCellDefault>

export const Default: Story = {
    args: {
        label: 'Cell content',
    },
}

export const Icon: Story = {
    args: {
        icon: 'with icon' as any,
        leftContentTooltip: 'This tooltip has content',
        label: 'Cell content',
    },
}

export const IconRightAligned: Story = {
    args: {
        icon: 'with icon' as any,
        leftContentTooltip: 'This tooltip has content',
        label: 'Cell content',
        align: 'right',
    },
}

export const IconNoLabel: Story = {
    args: {
        icon: 'with icon' as any,
        leftContentTooltip: 'This tooltip has content',
    },
}

export const Avatar: Story = {
    args: {
        avatar: 'with avatar',
        leftContentTooltip: 'Avatar of Mitch Parsons',
        label: 'Mitch Parsons',
    },
}

export const AvatarRightAligned: Story = {
    args: {
        avatar: 'with avatar',
        leftContentTooltip: 'Avatar of Mitch Parsons',
        label: 'Mitch Parsons',
        align: 'right',
    },
}

export const AvatarNoLabel: Story = {
    args: {
        avatar: 'with avatar',
        leftContentTooltip: 'Avatar of Mitch Parsons',
    },
}

export const Badge: Story = {
    args: {
        badge: 'with badge',
        leftContentTooltip: 'Number count',
        label: 'Project',
    },
}

export const BadgeRightAligned: Story = {
    args: {
        badge: 'with badge',
        leftContentTooltip: 'Number count',
        label: 'Project',
        align: 'right',
    },
}

export const BadgeNoLabel: Story = {
    args: {
        badge: 'with badge',
        leftContentTooltip: 'Number count',
    },
}

/** Hover or focus the cell to see caret */
export const WithCaret: Story = {
    args: {
        label: 'Cell content',
        withCaret: true,
    },
}

/** Hover or focus the cell to see caret */
export const WithCaretRightAligned: Story = {
    args: {
        label: 'Cell content',
        withCaret: true,
        align: 'right',
    },
}

export const BackgroundColor: StoryFn<typeof GridCellDefault> = () => (
    <GridCellDefault
        tabIndex={0}
        label="Orange cell"
        backgroundColor={theme.orange100}
    />
)

BackgroundColor.parameters = {
    controls: {
        hideNoControlsWarning: true,
    },
}

export const TextColor: Story = {
    args: {
        color: theme.textError,
        label: 'Error text',
    },
}

export const Link: Story = {
    args: {
        label: 'Visit planview.com',
        href: 'href as object' as any,
    },
}

export const LinkWithIcon: Story = {
    args: {
        icon: <Globe />,
        label: 'Visit planview.com',
        href: 'href as object' as any,
    },
}

export const Numeric: Story = {
    args: {
        label: '1,000',
        numeric: true,
    },
}

export const NumericLeftAligned: Story = {
    args: {
        label: '1,000',
        numeric: true,
        align: 'left',
    },
}

export const TruncatedContent: Story = {
    args: {
        label: 'This cell has a lot of content in it and should show a tooltip for this content',
    },
}

export const TruncatedBadgeAndContent: Story = {
    args: {
        badge: 'Environmental Design',
        label: 'This cell has a lot of content in it and should show a tooltip for this content',
        withCaret: true,
    },
}