import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Container,
  ListGroup,
  ListGroupItem,
  Modal,
  Row,
  Col,
  Button,
} from 'reactstrap';

import { User, useAvatarUrl } from '../data/user';

import SearchInput from '../common/SearchInput';

const TimelineMemberItem: React.FC<{
  user: User;
  owner: boolean;
  onRemove?: (username: string) => void;
}> = ({ user, owner, onRemove }) => {
  const { t } = useTranslation();

  const avatarUrl = useAvatarUrl(user.username);

  return (
    <ListGroupItem className="container">
      <Row>
        <Col className="col-auto">
          <img src={avatarUrl} className="avatar small" />
        </Col>
        <Col>
          <Row>{user.nickname}</Row>
          <Row>
            <small>{'@' + user.username}</small>
          </Row>
        </Col>
        {(() => {
          if (owner) {
            return null;
          }
          if (onRemove == null) {
            return null;
          }
          return (
            <Button
              className="align-self-center"
              color="danger"
              onClick={() => {
                onRemove(user.username);
              }}
            >
              {t('timeline.member.remove')}
            </Button>
          );
        })()}
      </Row>
    </ListGroupItem>
  );
};

export interface TimelineMemberCallbacks {
  onCheckUser: (username: string) => Promise<User | null>;
  onAddUser: (user: User) => Promise<void>;
  onRemoveUser: (username: string) => void;
}

export interface TimelineMemberProps {
  members: User[];
  edit: TimelineMemberCallbacks | null | undefined;
}

const TimelineMember: React.FC<TimelineMemberProps> = (props) => {
  const { t } = useTranslation();

  const [userSearchText, setUserSearchText] = useState<string>('');
  const [userSearchState, setUserSearchState] = useState<
    | {
        type: 'user';
        data: User;
      }
    | { type: 'error'; data: string }
    | { type: 'loading' }
    | { type: 'init' }
  >({ type: 'init' });

  const userSearchAvatarUrl = useAvatarUrl(
    userSearchState.type === 'user' ? userSearchState.data.username : undefined
  );

  const members = props.members;

  return (
    <Container className="px-4">
      <ListGroup className="my-3">
        {members.map((member, index) => (
          <TimelineMemberItem
            key={member.username}
            user={member}
            owner={index === 0}
            onRemove={props.edit?.onRemoveUser}
          />
        ))}
      </ListGroup>
      {(() => {
        const edit = props.edit;
        if (edit != null) {
          return (
            <>
              <SearchInput
                value={userSearchText}
                onChange={(v) => {
                  setUserSearchText(v);
                }}
                loading={userSearchState.type === 'loading'}
                onButtonClick={() => {
                  if (userSearchText === '') {
                    setUserSearchState({
                      type: 'error',
                      data: 'login.emptyUsername',
                    });
                    return;
                  }

                  setUserSearchState({ type: 'loading' });
                  edit.onCheckUser(userSearchText).then(
                    (u) => {
                      if (u == null) {
                        setUserSearchState({
                          type: 'error',
                          data: 'timeline.userNotExist',
                        });
                      } else {
                        setUserSearchState({ type: 'user', data: u });
                      }
                    },
                    (e) => {
                      setUserSearchState({
                        type: 'error',
                        data: `${e as string}`,
                      });
                    }
                  );
                }}
              />
              {(() => {
                if (userSearchState.type === 'user') {
                  const u = userSearchState.data;
                  const addable =
                    members.findIndex((m) => m.username === u.username) === -1;
                  return (
                    <>
                      {!addable ? (
                        <p>{t('timeline.member.alreadyMember')}</p>
                      ) : null}
                      <Container className="mb-3">
                        <Row>
                          <Col className="col-auto">
                            <img
                              src={userSearchAvatarUrl}
                              className="avatar small"
                            />
                          </Col>
                          <Col>
                            <Row>{u.nickname}</Row>
                            <Row>
                              <small>{'@' + u.username}</small>
                            </Row>
                          </Col>
                          <Button
                            color="primary"
                            className="align-self-center"
                            disabled={!addable}
                            onClick={() => {
                              void edit.onAddUser(u).then((_) => {
                                setUserSearchText('');
                                setUserSearchState({ type: 'init' });
                              });
                            }}
                          >
                            {t('timeline.member.add')}
                          </Button>
                        </Row>
                      </Container>
                    </>
                  );
                } else if (userSearchState.type === 'error') {
                  return (
                    <p className="text-danger">{t(userSearchState.data)}</p>
                  );
                }
              })()}
            </>
          );
        } else {
          return null;
        }
      })()}
    </Container>
  );
};

export default TimelineMember;

export interface TimelineMemberDialogProps extends TimelineMemberProps {
  open: boolean;
  onClose: () => void;
}

export const TimelineMemberDialog: React.FC<TimelineMemberDialogProps> = (
  props
) => {
  return (
    <Modal isOpen={props.open} toggle={props.onClose}>
      <TimelineMember {...props} />
    </Modal>
  );
};