import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { PATHS as HOMEPAGE } from 'pages/root/HomePage';
import { useMutation, gql } from '@apollo/client';
import { alliance } from 'components/alliance/schema/fragments';
import {
  AllianceFragment,
  UpdateAllianceMutation,
  UpdateAllianceMutationVariables,
} from 'types/graphql';

import { useFragmentQuery } from 'lib/apollo/useFragmentQuery';
import { useModal } from 'components/layers';

import { Box, Button, Spinner, Text } from 'components/common';
import { Input } from 'components/inputs';
import { DeleteAllianceModal } from 'components/alliance/modals';

export const UPDATE_ALLIANCE = gql`
  mutation UPDATE_ALLIANCE(
    $allianceId: ID!
    $name: String
    $description: String
  ) {
    alliance: updateAlliance(
      allianceId: $allianceId
      name: $name
      description: $description
    ) {
      ...alliance
    }
  }
  ${alliance}
`;

export const AllianceSettings = () => {
  const { allianceId } = useParams();
  const navigate = useNavigate();

  const data = useFragmentQuery<AllianceFragment>(alliance, allianceId!);

  const [update, { loading, error }] = useMutation<
    UpdateAllianceMutation,
    UpdateAllianceMutationVariables
  >(UPDATE_ALLIANCE);
  const [state, setState] = useState({
    name: data?.name || '',
    description: data?.description || '',
  });

  const handleChange: React.ChangeEventHandler<
    HTMLInputElement | HTMLTextAreaElement
  > = (ev) => {
    const { name, value } = ev.target;
    setState((s) => ({ ...s, [name]: value }));
  };

  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (ev) => {
    ev.preventDefault();

    try {
      await update({
        variables: { allianceId: allianceId!, ...state },
      });
    } catch (error) {
      console.error(error);
    }
  };

  const deleteAllianceModal = useModal(DeleteAllianceModal, {
    defaultProps: {
      allianceId: allianceId!,
      onComplete: () => {
        navigate(`/${HOMEPAGE.multiplayer}`);
      },
    },
  });

  return (
    <Box
      display="flex"
      flex="grow"
      align="start"
      justify="center"
      padding={4}
      spacingY={2}
      style={{ background: 'var(--colorGray01)' }}
    >
      <Box width={520} className="marginA" spacingY={4}>
        <Box
          padding={4}
          className="rounded4 bg-white"
          style={{ border: '1px solid var(--borderColor)' }}
        >
          <form className="spacingY4" onSubmit={handleSubmit}>
            <Box position="relative" spacingY={2}>
              <Input
                name="name"
                value={state.name}
                onChange={handleChange}
                placeholder="Alliance name"
                disabled={loading}
                autoFocus
              />
              <textarea
                rows={4}
                className="input"
                name="description"
                value={state.description}
                onChange={handleChange}
                placeholder="Description"
                disabled={loading}
              />
              <Spinner show={loading} />
            </Box>
            <Box display="flex">
              <Button
                type="submit"
                // onClick={handleSubmit}
                color="blue"
                block
                disabled={!state || loading}
              >
                Update
              </Button>
            </Box>
          </form>
          {error && <Text align="center">Something went wrong</Text>}
        </Box>
        <Box
          padding={4}
          className="rounded4 bg-white"
          style={{ border: '1px solid var(--borderColor)' }}
          spacingY={2}
        >
          <Button
            type="button"
            onClick={() => deleteAllianceModal.show()}
            color="gray"
            block
          >
            Delete alliance
          </Button>
        </Box>
      </Box>
    </Box>
  );
};