import React from 'react'

import type { Meta } from '@storybook/react'
import { Avatar, Icons } from '../components'
import { AvatarGroup, Stack } from '@mui/material'
import { green, pink } from '@mui/material/colors'

const meta = {
  title: 'Display/Avatar',
  component: Avatar,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof Avatar>

export default meta

function stringToColor(string: string) {
  let hash = 0
  let i

  /* eslint-disable no-bitwise */
  for (i = 0; i < string.length; i += 1) {
    hash = string.charCodeAt(i) + ((hash << 5) - hash)
  }

  let color = '#'

  for (i = 0; i < 3; i += 1) {
    const value = (hash >> (i * 8)) & 0xff
    color += `00${value.toString(16)}`.slice(-2)
  }
  /* eslint-enable no-bitwise */

  return color
}

function stringAvatar(name: string) {
  return {
    sx: {
      bgcolor: stringToColor(name),
    },
    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
  }
}

export const AvatarBasic = () => {
  return (
    <>
      <Avatar src="https://mui.com/static/images/avatar/2.jpg" />
    </>
  )
}

export const AvatarVariants = () => {
  return (
    <Stack direction="row" spacing={2}>
      <Avatar src="https://mui.com/static/images/avatar/1.jpg" variant="square" />
      <Avatar src="https://mui.com/static/images/avatar/2.jpg" variant="rounded" />
      <Avatar src="https://mui.com/static/images/avatar/3.jpg" />
    </Stack>
  )
}

export const AvatarLetters = () => {
  return (
    <>
      <Stack direction="row" spacing={2}>
        <Avatar {...stringAvatar('Kent Dodds')} />
        <Avatar {...stringAvatar('Jed Watson')} />
        <Avatar {...stringAvatar('Tim Neutkens')} />
      </Stack>
    </>
  )
}

export const AvatarSizes = () => {
  return (
    <>
      <Stack direction="row" spacing={2}>
        <Avatar
          src="https://mui.com/static/images/avatar/1.jpg"
          variant="square"
          sx={{ width: 24, height: 24 }}
        />
        <Avatar src="https://mui.com/static/images/avatar/2.jpg" variant="rounded" />
        <Avatar src="https://mui.com/static/images/avatar/3.jpg" sx={{ width: 56, height: 56 }} />
      </Stack>
    </>
  )
}

export const AvatarWidthIcons = () => {
  return (
    <>
      <Stack direction="row" spacing={2}>
        <Avatar>
          <Icons icon="user" color="white" />
        </Avatar>
        <Avatar sx={{ bgcolor: pink[500] }}>
          <Icons icon="starOutlined" color="white" />
        </Avatar>
        <Avatar sx={{ bgcolor: green[500] }}>
          <Icons icon="chartBar" color="white" />
        </Avatar>
      </Stack>
    </>
  )
}

export const AvatarGrouped = () => {
  return (
    <>
      <Stack direction="row" spacing={2}>
        <AvatarGroup max={4}>
          <Avatar src="https://mui.com/static/images/avatar/1.jpg" />
          <Avatar src="https://mui.com/static/images/avatar/2.jpg" />
          <Avatar src="https://mui.com/static/images/avatar/3.jpg" />
          <Avatar src="https://mui.com/static/images/avatar/4.jpg" />
          <Avatar src="https://mui.com/static/images/avatar/5.jpg" />
        </AvatarGroup>
      </Stack>
    </>
  )
}