import React, { useState } from 'react'
import styled, { css, FlattenSimpleInterpolation } from 'styled-components'
import { values } from 'mobx'
import { Popover } from 'antd'
import { Button as CustomButton } from '@elements/form-controls/Button'
import SelectDisplayMenus from './modals/SelectDisplayMenus'
import ItemDetails from './ItemDetails'
import Customize from './Icons/Customize.svg'
import CustomizeSelected from './Icons/CustomizeSelected.svg'

const BottomPartContainer = styled.div`
    height: 46px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.888889px;
    color: #3F3F52;
    margin: 72px 0 216px 0;
`

const Button = styled(CustomButton)`
`

const BoxWithWidth = styled.div`
    width= 228px;
`

const Container = styled.div`
    font-family: Montserrat;
    font-style: normal;
    width: 1148px;
    background: #FFFFFF;
    border: 1px solid #FEF2F0;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
    padding: 0 0 21px 32px;
`

const ControlsHolder = styled.div`
    width: 501px;
    height: 44px;
    border: 1px solid #E7E4E3;
    box-sizing: border-box;
    display: flex;
    margin: 24px 0 25px 0;
`

const CreateButton = styled(Button).attrs((props) => ({
    type: props.type || 'info',
}))`
    background: #35BF7D;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    color: #FFFFFF;
    width: 190px;
    height: 44px;
    &:hover {
      background: #299b62;
    }
`

const DrawerContainer = styled.div<{ open: boolean }>`
  width: 100%;
  transition: 0.3s;
  ${(props): FlattenSimpleInterpolation => props.open && css`
    width: calc(100% - 540px);
    border: 1px solid #DFDFDF;
    padding: 0 21px;
  `}
`

const Heading = styled.h1`
    height: 20px;
    font-weight: 600;
    font-size: 24px;
    line-height: 20px;
    color: #3F3F52;
    margin: 36px 0 29px 0;
`

const ItemsCountParagraph = styled.p`
    height: 20px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.888889px;
    color: #3F3F52;
    margin-bottom: 78px;
`

const ItemSeparator = styled.div`
    display: flex;
    justify-content: space-between;
`

const MenuRow = styled.div`
    font-weight: 500;
    font-size: 16px;
    line-height: 1px;
    letter-spacing: 0.888889px;
    color: #3F3F52;
    opacity: 0.7;
    display: flex;
    border-bottom: 1px solid #e7e4e3;
    width: 100%;
    & >div {
      padding: 0 30px;
      display: flex;
      align-items: center;
      height: 70px;
      &:first-child {
        width: 33%;
      }
      &:nth-child(2) {
        width: 17%;
      }
      &:last-child {
        width: 50%;
      }
    }
`

const MenuRowSelected = styled.div`
    background: #34C47C;
    font-size: 16px;
    line-height: 1px;
    letter-spacing: 0.888889px;
    color: #FFFFFF;
    display: flex;
    border-bottom: 1px solid #e7e4e3;
    width: 100%;
    & >div {
      padding: 0 30px;
      display: flex;
      align-items: center;
      height: 70px;
      &:first-child {
        width: 40%;
      }
      &:nth-child(2) {
        width: 20%;
      }
      &:last-child {
        width: 40%;
      }
    }
`

const MenuRowShrinked = styled(MenuRow)`
& >div {
    &:first-child {
      width: 40%;
    }
    &:nth-child(2) {
      width: 20%;
    }
    &:last-child {
      width: 40%;
    }
  }
`

const MenuTableHeader = styled(MenuRow)`
    font-size: 12px;
    line-height: 16px;
`

const MenuTableHeaderShrinked = styled(MenuRowShrinked)`
    font-size: 12px;
    line-height: 16px;
`

const SearchInput = styled.input`
    width: 311px;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #E7E4E3;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    display: flex;
    align-items: flex-end;
    color: #6C6C6C;
    padding-left: 13px;
`

const SpanWithPadding = styled.span`
    padding-left: 180px;
`

const SpanWithPaddingShrinked = styled.span`
    padding-left: 80px;
`

const TextParagraph = styled.p`
    height: 23px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.888889px;
    color: #3F3F52;
    margin-bottom: 0;
`

const PopoverContent = (props: { sandbox: jc.Sandbox }): React.ReactElement<null> =>
    <SelectDisplayMenus sandbox={props.sandbox} />

export default (props: { sandbox: jc.Sandbox }): JSX.Element => {
    const [selectedItemId, select] = useState(-1)
    const changeSelection = (id: number): void => select(id)

    const [isOpen, open] = useState(false)
    const ItemDetailsColumn = selectedItemId !== -1 ? <ItemDetails sandbox={props.sandbox} /> : ''

    const items = values(props.sandbox.globalData.itemStore.items)
    const ItemsList = items.map((i) =>
        <MenuRow onClick={(): void => { open(true); changeSelection(i.id); }}>
            <div>{i.name}</div>
            <div>$ {i.price.toFixed(2)}</div>
            <ItemSeparator>
                {/* TODO: Remove this hardcoded value when the meaning is clear */}
                <SpanWithPadding>4</SpanWithPadding>
                <Popover trigger={'hover'} placement={'bottom'} content={<PopoverContent sandbox={props.sandbox} />}>
                    <Customize />
                </Popover>
            </ItemSeparator>
        </MenuRow>)

    const ItemsListShrinked = items.map((i) => i.id === selectedItemId ?
        (<MenuRowSelected>
            <div>{i.name}</div>
            <div>$ {i.price.toFixed(2)}</div>
            <ItemSeparator>
                {/* TODO: Remove this hardcoded value when the meaning is clear */}
                <SpanWithPaddingShrinked>4</SpanWithPaddingShrinked>
                <Popover trigger={'hover'} placement={'bottom'} content={<PopoverContent sandbox={props.sandbox} />}>
                    <CustomizeSelected />
                </Popover>
            </ItemSeparator>
        </MenuRowSelected>)
        :
        (<MenuRowShrinked onClick={(): void => { open(true); changeSelection(i.id); }}>
            <div>{i.name}</div>
            <div>$ {i.price.toFixed(2)}</div>
            <ItemSeparator>
                {/* TODO: Remove this hardcoded value when the meaning is clear */}
                <SpanWithPaddingShrinked>4</SpanWithPaddingShrinked>
                <Popover trigger={'hover'} placement={'bottom'} content={<PopoverContent sandbox={props.sandbox} />}>
                    <Customize />
                </Popover>
            </ItemSeparator>
        </MenuRowShrinked>))

    const Content = values(props.sandbox.globalData.itemStore.items).length === 0 ? (
        <BottomPartContainer>
            <TextParagraph>You have no items added.</TextParagraph>
            <TextParagraph>Click on "<strong>Create New Item</strong> to get started</TextParagraph>
            <Button
                css={'width: 190px; height: 44px; background: #F0703D; margin-top: 20px;'}
                type={'primary'}
                onClick={(): void => props.sandbox.redirect('/item/create')}
            >
                Create new Item
            </Button>
        </BottomPartContainer>
    ) : (
            <div>
                {selectedItemId === - 1 ? ItemsList : ItemsListShrinked}
            </div>
        )

    return (
        <Container>
            <Heading>Create new Item</Heading>
            <DrawerContainer open={isOpen}>
                <ControlsHolder>
                    <SearchInput placeholder={'Search items'} />
                    <CreateButton onClick={(): void => props.sandbox.redirect('/item/create')}>Create new Item</CreateButton>
                </ControlsHolder>
                <ItemsCountParagraph>Total items {items.length}</ItemsCountParagraph>
                {selectedItemId === -1 ?
                    <MenuTableHeader>
                        <div>ITEM NAME</div>
                        <div>PRICE</div>
                        <BoxWithWidth>NUMBER OF BREEZE MENUS DISPLAYING ITEM</BoxWithWidth>
                    </MenuTableHeader>
                    :
                    <MenuTableHeaderShrinked>
                        <div>ITEM NAME</div>
                        <div>PRICE</div>
                        <div>IN MENUS</div>
                    </MenuTableHeaderShrinked>
                }
                {Content}
            </DrawerContainer>

            {ItemDetailsColumn}
        </Container>
    )
}