import React from 'react'
import { Icon } from '../icons/Icon.jsx'
import { Button } from '../button/Button.jsx'
import { Text } from '../text/Text.jsx'
import { View } from '../view/View.jsx'
import { Tags } from '../tags/Tags.jsx'

export const Profile = ({
  name = '',
  role = '',
  image = '',
  links: linksProp,
  summary = '',
  tags: tagsProp,
  activeTags = [],
  tagsLabel = 'Experience with',
  onTagClick = () => {},
  surface = 'primary',
  roundness = 's',
  inset = 'l',
  ...props
}) => {
  const links = linksProp ?? []
  const tags = tagsProp ?? []

  return (
  <View
    data-scroll
    data-profile
    surface={surface}
    roundness={roundness}
    inset={inset}
    {...props}
  >
    <style href="@ossy/design-system/profile" precedence="high">
    {`
      [data-profile] {
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-l);
        scrollbar-width: none;
        overflow-y: auto;
        box-sizing: border-box;
        border: 0.5px solid var(--separator-primary);
      }

      [data-profile]::-webkit-scrollbar {
        display: none;
      }

      [data-profile] .titles {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-s);
        text-align: center;
      }

      [data-profile] .tags {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-m);
        max-width: 600px;
      }

      [data-profile] img {
        border-radius: 50%;
        width: 50%;
        max-width: 200px;
        height: auto;
        margin: 0 auto;
      }
    `}
    </style>

    {image ? <img src={image} alt={name} /> : null}

    <div className="titles">
      <Text as="h1" variant="heading-primary">{name}</Text>
      {role ? <Text as="h2" variant="lead">{role}</Text> : null}
    </div>

    {links.length > 0 && (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-m)' }}>
        {links.map((x) => (
          <Button
            style={{ justifyContent: 'flex-start' }}
            {...x}
            variant={x.variant || 'link'}
            key={x.label}
          >
            {x.icon ? <Icon name={x.icon} /> : null}
            {x.label}
          </Button>
        ))}
      </div>
    )}

    {summary ? (
      <div>
        {summary
          .split('\n\n')
          .map((paragraph) => (
            <Text key={paragraph} style={{ maxWidth: '600px', textAlign: 'left' }}>
              {paragraph}
            </Text>
          ))}
      </div>
    ) : null}

    {tags.length > 0 && (
      <div className="tags">
        <Text as="h3" variant="heading-secondary">{tagsLabel}</Text>
        <Tags
          tags={[...tags].sort((a, b) => a.localeCompare(b))}
          activeTags={activeTags}
          onSelect={onTagClick}
          style={{ textAlign: 'center' }}
        />
      </div>
    )}
  </View>
  )
}