import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { Button, ButtonTypes } from '../../Button';
import { DraggableContainer } from '../../DraggableContainer';
import { Input } from '../../Input';
import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';

export interface IPartyCreateProps {
  onClose: () => void;
  onCreate: () => void;
}

export const PartyCreate: React.FC<IPartyCreateProps> = ({
  onClose,
  onCreate,
}) => {
  return (
    <DraggableContainer
      type={RPGUIContainerTypes.Framed}
      onCloseButton={() => {
        if (onClose) onClose();
      }}
      width="500px"
      height="300px"
      cancelDrag=".partyRows"
    >
      <Wrapper>
        <div style={{ width: '100%' }}>
          <Title>Create Party</Title>
          <hr className="golden" />
        </div>
      </Wrapper>
      <h1>Type your party name</h1>
      <Input placeholder="Type party name" type="text" />
      <ButtonWrapper>
        <Button
          buttonType={ButtonTypes.RPGUIButton}
          onPointerDown={() => {
            onCreate();
          }}
        >
          Confirm
        </Button>
        <div className="cancel-button">
          <Button
            buttonType={ButtonTypes.RPGUIButton}
            onPointerDown={() => {
              close();
            }}
          >
            Cancel
          </Button>
        </div>
      </ButtonWrapper>
    </DraggableContainer>
  );
};

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
`;
const Title = styled.h1`
  font-size: 0.6rem;
  color: ${uiColors.yellow} !important;
`;

const ButtonWrapper = styled.div`
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .cancel-button {
    filter: grayscale(0.7);
  }
`;
