import emojify from '@/utils/emojify'
import { Avatar, Button, CustomFlowbiteTheme, Dropdown, Flowbite, Tabs } from 'flowbite-react'
import { Entity, MegalodonInterface } from 'megalodon'
import { useEffect, useState } from 'react'
import { FaEllipsisVertical } from 'react-icons/fa6'
import { FormattedMessage, useIntl } from 'react-intl'
import Timeline from './profile/Timeline'

type Props = {
  client: MegalodonInterface
  user_id: string
}

const customTheme: CustomFlowbiteTheme = {
  tab: {
    tablist: {
      tabitem: {
        base: 'flex items-center justify-center p-4 rounded-t-lg text-sm font-medium first:ml-0 disabled:cursor-not-allowed disabled:text-gray-400 disabled:dark:text-gray-500'
      }
    }
  }
}

export default function Profile(props: Props) {
  const [user, setUser] = useState<Entity.Account | null>(null)
  const [relationship, setRelationship] = useState<Entity.Relationship | null>(null)
  const { formatMessage } = useIntl()

  useEffect(() => {
    const f = async () => {
      if (props.user_id) {
        const res = await props.client.getAccount(props.user_id)
        setUser(res.data)
        const rel = await props.client.getRelationship(props.user_id)
        setRelationship(rel.data)
      }
    }
    f()
  }, [props.user_id, props.client])

  const follow = async (id: string) => {
    const rel = await props.client.followAccount(id)
    setRelationship(rel.data)
  }

  const unfollow = async (id: string) => {
    const rel = await props.client.unfollowAccount(id)
    setRelationship(rel.data)
  }

  const openOriginal = async (url: string) => {
    global.ipc.invoke('open-browser', url)
  }

  return (
    <div style={{ height: 'calc(100% - 50px)' }} className="overflow-y-auto">
      <Flowbite theme={{ theme: customTheme }}>
        {user && relationship && (
          <>
            <div className="header-image w-full bg-gray-100">
              <img src={user.header} alt="header image" className="w-full object-cover h-40" />
            </div>
            <div className="p-5">
              <div className="flex items-end justify-between" style={{ marginTop: '-50px' }}>
                <Avatar img={user.avatar} size="lg" stacked />
                <div className="flex gap-2">
                  {relationship.following ? (
                    <Button onClick={() => unfollow(user.id)}>
                      <FormattedMessage id="profile.unfollow" />
                    </Button>
                  ) : (
                    <Button onClick={() => follow(user.id)}>
                      <FormattedMessage id="profile.follow" />
                    </Button>
                  )}
                  <Dropdown
                    label=""
                    renderTrigger={() => (
                      <Button color="gray">
                        <FaEllipsisVertical />
                      </Button>
                    )}
                  >
                    <Dropdown.Item onClick={() => openOriginal(user.url)}>
                      <FormattedMessage id="profile.open_original" />
                    </Dropdown.Item>
                  </Dropdown>
                </div>
              </div>
              <div className="pt-4">
                <div className="font-bold">{user.display_name}</div>
                <div className="text-gray-500">@{user.acct}</div>
                <div className="mt-4 raw-html">
                  <span
                    dangerouslySetInnerHTML={{ __html: emojify(user.note, user.emojis) }}
                    className="overflow-hidden break-all text-gray-800"
                  />
                </div>
                <div className="bg-gray-100 overflow-hidden break-all raw-html mt-2">
                  {user.fields.map((data, index) => (
                    <dl key={index} className="px-4 py-2 border-gray-200 border-b">
                      <dt className="text-gray-500">{data.name}</dt>
                      <dd className="text-gray-700" dangerouslySetInnerHTML={{ __html: emojify(data.value, user.emojis) }} />
                    </dl>
                  ))}
                </div>
              </div>
            </div>
            <div>
              <Tabs.Group aria-label="Tabs with icons" style="underline">
                <Tabs.Item active title={formatMessage({ id: 'profile.timeline' })}>
                  <Timeline client={props.client} user_id={props.user_id} />
                </Tabs.Item>
                <Tabs.Item title={formatMessage({ id: 'profile.followings' })}>followings</Tabs.Item>
                <Tabs.Item title={formatMessage({ id: 'profile.followers' })} className="focus:ring-0">
                  followers
                </Tabs.Item>
              </Tabs.Group>
            </div>
          </>
        )}
      </Flowbite>
    </div>
  )
}