import styled from 'styled-components';
import {declension} from "../../utils/declension";

interface TagsInputProps {
    title: string;
    type: 'avoid' | 'favorite';
    value: string[];
    availableTags: string[];
    excludedTags: string[];
    onChange: (tags: string[]) => void;
    onExpand: () => void;
}

export function TagsInput({
                              title,
                              value,
                              onExpand,
                          }: TagsInputProps) {

    return (
        <Row>
            <Column>
                <Title>{title}</Title>
                <Info>{value.length > 0 ? declension(value.length, ['Выбрана', 'Выбраны', 'Выбраны']) + ': ' + value.length : 'Не выбраны'}</Info>
            </Column>
            <AddWrapper>
                <Button
                    type="button"
                    onClick={onExpand}
                >
                    {value.length > 0 ? 'Заменить' : 'Выбрать'}
                </Button>
            </AddWrapper>
        </Row>
    );
}

const AddWrapper = styled.div`
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
`;

const Button = styled.button`
    padding: 18px 23px;
    border-radius: 12px;
    min-width: 160px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: ${({theme}) => theme.colors.green};
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
    background-color: transparent;
    border: 0;

    span {
        color: inherit;
        font-weight: inherit;
    }

    &:hover {
        background-color: #F7FBF6;
    }

    &:active,
    &:focus {
        background-color: #EEF8EB;
        outline: none;
    }

    span {
        font-size: 20px;
        margin-left: 8px;
        font-weight: 300;
    }
`;

const Row = styled.div`
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: 1 1 100%;
    justify-content: center;
`
const Column = styled.div`
    flex: 1 1 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
`;

const Info = styled.span`
    color: ${({theme}) => theme.colors.gray};
`;
const Title = styled.span`
    display: block;
    font-size: 16px;
    font-weight: 370;
    color: ${({theme}) => theme.colors.darkGreen};
    margin-bottom: 8px;
`;

export const TagsWrap = styled.div`
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
`;

const palette = {
    inactive: {
        avoid: {
            bg: '#FDE3E3',
            text: '#0c3b2e',
        },
        favorite: {
            bg: '#F1F9D7',
            text: '#0c3b2e',
        }
    },
    active: {
        avoid: {
            bg: '#9F2518',
            text: '#FDE3E3',
        },
        favorite: {
            bg: '#5EA12D',
            text: '#F1F9D7',
        }
    },
};

export const Tag = styled.div<{ $type: 'avoid' | 'favorite', $active: boolean }>`
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    background-color: ${({$type,$active}) => palette[$active ? 'active' : 'inactive'][$type].bg};
    color: ${({$type,$active}) => palette[$active ? 'active' : 'inactive'][$type].text};

    button {
        cursor: pointer;
        font-size: 15px;
        opacity: 0.6;
        border: 0;
        background: transparent;
        color: inherit;

        &:hover {
            opacity: 1;
        }
    }
`;
